Mobile-Friendly Firefox Customizations for Librem 5

Hardware Librem 5
,
68

Thanks for the clear explanation, it works much better now. However, there is some kind of overlap for the buttons still as seen in this screenshot:

20231111_11h59m47s_grim
20231111_11h59m47s_grim720×1440 127 KB

I also have two “home” buttons, although the one to the right brings up the addon list.
I am using the firefox-esr system theme and I don’t know if the purple colors come from that one or from the fenix_one.css. I would like a lighter color on toolbar and tabs if possible, how do I change this?
One more thing. I find the popups a bit difficult to use on the mobile, especially scroll between open tabs.
20231111_12h06m34s_grim
20231111_12h06m34s_grim720×1440 111 KB

I think I have seen somewhere in this post popups covering the whole screen, but I can’t seem to find that css now.

Thanks for your excellent work on this, very useful!

2 Likes
69

The one on the left is the real Home button. The one on the right is the Unified Extensions Menu button using the icon of the Home button in order to mimic the Firefox for Android app.

If you don’t like that, you can comment out or remove that section of code from the fenix_one.css file. It exists in two places in the file in order to theme the icon in portrait and landscape modes.

Here is the code responsible for the theming of the icon:

    /* Change Unified Extensions Menu button icon to Home button icon */
    #unified-extensions-button {
        list-style-image: url("chrome://browser/skin/home.svg") !important;
    }

You should save the updated version of the fenix_one.css file, which properly allows space for the Tab Manager Menu button and toolbar items while fixing the overlapping issue.

I think you should also consider removing some of the other toolbar buttons. I would recommend removing the Refresh button, and the real Home button (currently on the left of your URL Bar). If you have a use for the Widget Overflow Menu (»), you can put the Home button inside of it, otherwise you can remove them both. And you can tap and hold on a blank area of a page to summon a menu popup that includes buttons for Back, Forward, Refresh, and Add Bookmark.

To disable the colorful toolbar, comment out or remove this section of code from the very bottom of the fenix_one.css file:

/* Private Browsing Mode theme for URL Bar and Nav Bar */
:root {
    --toolbar-field-border-color: var(--arrowpanel-background) !important;
    --toolbar-field-focus-border-color: var(--arrowpanel-background) !important;
    --lwt-toolbar-field-background-color: var(--arrowpanel-background) !important;
    --toolbar-field-background-color: var(--arrowpanel-background) !important;
    --toolbar-field-focus-background-color: var(--arrowpanel-background) !important;
}
#nav-bar {
    background-image: -moz-linear-gradient(to right, rgb(112,34,145), rgb(57,52,115)) !important;
}
#navigator-toolbox {
    --lwt-tabs-border-color: rgb(134,93,180) !important;
}

All other colors are managed at the top of the fenix_one.css and userContent.css (fenix) files. If you don’t want to apply any color themes, then you should use fenix_fox.css which is just fenix_one.css without any color themes applied. I haven’t posted a non-colorized userContent.css file yet, but I could do that. I made a userContent.css (non-colorized) file.

Now, when you say you want a lighter color for the tabs, are you talking about the grey bar at the top of your screenshots with the Firefox logo on the left? That looks like the Title Bar to me, which can be disabled using the “Customize Toolbar” feature. Otherwise, what do you mean when you say tabs? The Tab Manager Menu popup? And if so, which part of it?

What you are looking for is one of my dynamic_popups files, found in True Mobile Modes & Dynamic Popups (post 56). You can see some screenshots of them in Styles & Screenshots (post 61).

For fullscreen popups, you either want dynamic_popups_max.css or dynamic_popups_pro_max.css. They are both fullscreen, but the pro blends the color of the popup container with the popup to make it look truly fullscreen, whereas the other one has a black popup container to show just the rounded popup itself.

Regardless of which dynamic_popups file you use, if any, you should be able to scroll extensions/addons vertically and/or horizontally, depending on the size and shape of the extension/addon popup.

Thank you for the appreciation and the feedback! It’s nice to see some people trying it out.

70

Final Updates:

Updated November 5th 2023:

Remember, remember, the fifth of November, the extensions, even, I got;
I know of no reason why the extensions season should ever be forgot!

  • Adjusted the following files to allow for vertical scrolling of extension popups:

    • extensions_menu.css
    • true_mobile_landscape-alt.css
    • true_mobile_landscape.css
    • dynamic_popups.css
    • dynamic_popups_plus.css
    • dynamic_popups_max.css
    • dynamic_popups_pro.css
    • dynamic_popups_pro_max.css
    • fenix_fox-alt.css
    • fenix_fox.css
    • fenix_one-alt.css
    • fenix_one.css

  • Adjusted userContent.css (fenix) to apply fenix colors to all about pages using regexp and selectively fix about pages to better fit display.

Updated November 9th 2023:
  • Adjusted userContent.css (fenix) to fix a mistake that I had made. Sidebar size variable was in color section at top, being applied to all screen sizes; it is now properly set for smaller screens only, for the specific about pages that require it.
Updated November 10th-12th 2023:

  • Added userContent.css (non-colorized).

  • Adjusted the following files to properly allow space for Tab Manager Menu button and toolbar items:

    • single_tab_mode-alt.css
    • alt-single_tab_mode-alt.css
    • single_tab_mode.css
    • true_mobile_landscape-alt.css
    • true_mobile_landscape.css
    • true_mobile_mode-alt.css
    • true_mobile_mode.css
    • fenix-alt.css
    • fenix.css
    • fenix_fox-alt.css
    • fenix_fox.css
    • fenix_one-alt.css
    • fenix_one.css
Updated November 13th 2023:

  • Fixed a typo, changing 4px to 5px in the following file:

    • Line 31 of true_mobile_mode.css

  • Changed --panel-background: none !important; to --panel-background: var(--toolbar-bgcolor) !important; in the following files:

    • Line 52 of dynamic_popups_pro.css
    • Line 66 of dynamic_popups_pro_max.css
Updated November 15th 2023:

  • Added code to allow for fully expanded Tab Manager Menu in landscape mode in the following files:

    • Line 114 of true_mobile_landscape-alt.css
    • Line 140 of true_mobile_landscape.css
    • Line 299 of fenix_fox-alt.css
    • Line 320 of fenix_fox.css
    • Line 520 of fenix_one-alt.css
    • Line 541 of fenix_one.css

  • After the additional code was added, changed 207px to 18px in the following files:

    • Line 155 of fenix-alt.css
    • Line 155 of fenix.css
    • Line 312 of fenix_fox-alt.css
    • Line 333 of fenix_fox.css
    • Line 533 of fenix_one-alt.css
    • Line 554 of fenix_one.css

  • After the additional code was added, removed a line of code in the following files:

    • Line 160 of fenix-alt.css
    • Line 160 of fenix.css
    • Line 317 of fenix_fox-alt.css
    • Line 338 of fenix_fox.css
    • Line 538 of fenix_one-alt.css
    • Line 559 of fenix_one.css
Updated November 17th 2023:

  • Added fenix_theme.css for those that want the Firefox for Android (fenix) theme and don’t want to hide the Tab Bar.

  • Added file descriptions to some posts.

  • Adjusted the following files to hide the Tab Bar in Fullscreen and to hide the Title Bar (only useful if you modify these files to prevent hiding the Tab Bar):

    • Lines 251-254 and Lines 511-514 of fenix_fox-alt.css
    • Lines 251-254 and Lines 542-545 of fenix_fox.css
    • Lines 472-475 and Lines 732-735 of fenix_one-alt.css
    • Lines 472-475 and Lines 763-766 of fenix_one.css

Changed this:

    /* Hide Nav Bar when in Fullscreen mode */
    #nav-bar[inFullscreen] {
        display: none;
    }

To this:

    /* Hide Nav Bar and Tab Bar when in Fullscreen mode and hide and Title Bar */
    #nav-bar[inFullscreen],
    #TabsToolbar[inFullscreen],
    .titlebar-buttonbox-container {
        display: none;
    }
Updated November 19th 2023:

  • Renamed hide_tab_counter.css to hide_tab_manager_menu_button.css

  • Adjusted the following files for compatibility with all Display Scales (100%-200%):

    • Line 5 of appMenu.css
    • Line 5 of browser.css
    • Line 5 of editBookmarkPanel.css
    • Line 5 of findbar.css
    • Line 5 of popups.css
    • Line 5 of tabmenu.css
    • Line 11 of urlbar.css
    • Line 5 of alt-browser-alt.css
    • Line 5 of tabs_fill_available_width.css
    • Line 5 of numbered_tabs.css
    • Line 5 of extensions_menu.css
    • Line 35 of custom_rules.css
    • Line 20 of single_tab_mode-alt.css
    • Line 20 of alt-single_tab_mode-alt.css
    • Line 20 of single_tab_mode.css
    • Line 5 of hide_tab_manager_menu_button.css
    • Line 5 of hide_newtab_+_new-tab_buttons.css
    • Line 5 of new-tab-button.css
    • Line 20 & Line 198 of true_mobile_landscape-alt.css
    • Line 20 & Line 224 of true_mobile_landscape.css
    • Line 20 of true_mobile_mode-alt.css
    • Line 20 of true_mobile_mode.css
    • Line 5 of dynamic_popups.css
    • Line 5 of dynamic_popups_plus.css
    • Line 5 of dynamic_popups_max.css
    • Line 5 of dynamic_popups_pro.css
    • Line 5 of dynamic_popups_pro_max.css
    • Line 106 & Line 219 of fenix_theme.css
    • Line 106 & Line 225 of fenix-alt.css
    • Line 106 & Line 225 of fenix.css
    • Line 181 & Line 436 of fenix_fox-alt.css
    • Line 181 & Line 457 of fenix_fox.css
    • Line 402 & Line 657 of fenix_one-alt.css
    • Line 402 & Line 678 of fenix_one.css
    • Line 155, Lines 171-173, Line 265, Lines 281-283, Lines 316-318, Lines 338-340, Lines 367-369, Lines 465-467, & Lines 504-506 of userContent.css (fenix)
    • Line 8, Lines 24-26, Line 118, Lines 134-136, Lines 169-171, Lines 191-193, Lines 220-222, Lines 318-320, & Lines 357-359 of userContent.css (non-colorized)

Changed this:

@media (max-height: 300px) {

To this:

@media (orientation: landscape) and (max-height: 650px) {

Changed this:

@media (max-width: 700px) {

To this:

@media (orientation: portrait) and (max-width: 720px) {

Changed this:

    @media
    (max-height: 300px),
    (max-width: 700px) {

To this:

    @media
    (orientation: landscape) and (max-height: 650px),
    (orientation: portrait) and (max-width: 720px) {
Updated November 20th 2023:

  • Adjusted the following files for compatibility with New-Tab Button (new-tab-button.css):

    • Line 57 & Line 60 of single_tab_mode-alt.css
    • Line 57 & Line 60 of alt-single_tab_mode-alt.css
    • Line 57 & Line 60 of single_tab_mode.css

Changed this:

    /* Expand unpinned active tab */
    #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] {
        min-width: 100vw !important;
    }
    #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] {
        min-width: calc(100vw - 40px) !important;
    }

To this:

    /* Expand unpinned active tab */
    #tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[selected] {
        min-width: 100% !important;
    }
    #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned])[selected] {
        min-width: 83.5% !important;
    }

  • Adjusted the following files to fix a mistake I had made which prevented adding extensions to toolbar:

    • Lines 261-265 of fenix_theme.css
    • Lines 278-283 of fenix-alt.css
    • Lines 278-283 of fenix.css

Changed this:

    /* Hide Back button and Private Browsing Indicator */
    #back-button,
    #private-browsing-indicator-with-label {
        visibility: collapse !important;
    }

To this:

    /* Remove Back button */
    #back-button {
        display: none !important;
    }

    /* Hide Private Browsing Indicator */
    #private-browsing-indicator-with-label {
        visibility: collapse !important;
    }

Changed this:

    /* Hide Back button, Tab Bar, and Private Browsing Indicator */
    #back-button,
    #tabbrowser-tabs,
    #private-browsing-indicator-with-label {
        visibility: collapse !important;
    }

To this:

    /* Remove Back button */
    #back-button {
        display: none !important;
    }

    /* Hide Tab Bar and Private Browsing Indicator */
    #tabbrowser-tabs,
    #private-browsing-indicator-with-label {
        visibility: collapse !important;
    }
Updated November 21th 2023:

  • Adjusted the following files to better support fully expanded Tab Manager Menu in all Display Scales (100%-200%):

    • Line 101 & Line 102 of tabmenu.css
    • Line 117 & Line 118 of true_mobile_landscape-alt.css
    • Line 143 & Line 144 of true_mobile_landscape.css
    • Line 304, Line 305, Line 644 & Line 645 of fenix_fox-alt.css
    • Line 325, Line 326, Line 721 & Line 722 of fenix_fox.css
    • Line 525, Line 526, Line 865 & Line 866 of fenix_one-alt.css
    • Line 546, Line 547, Line 942 & Line 943 of fenix_one.css

Changed this:

    /* Expand Tab Manager Menu */
    #customizationui-widget-multiview panelview {
        max-width: calc(100vw - 10px) !important;
        width: calc(100vw - 10px) !important;
    }

To this:

    /* Expand Tab Manager Menu */
    #customizationui-widget-multiview panelview {
        max-width: 100% !important;
        width: 100% !important;
    }

Conclusion:

Okay, I think I am done updating files for a while now.

I have fixed all known issues, and everything works well.

So I think it’s safe for everyone to save the files they need now.

  • You can follow me on the fediverse:

Bonus:

I shifted some colors in my phosh color theme to better match the fenix colors.

For anyone interested, backup the gtk.css file located in ~/.config/gtk-3.0/ before replacing it with this file:

gtk.css 
@define-color accent_color rgb(230,140,255);
@define-color accent_bg_color rgb(190,102,218);
@define-color accent_fg_color #ffffff;
@define-color destructive_color #f66151;
@define-color destructive_bg_color #f66151;
@define-color destructive_fg_color #ffffff;
@define-color success_color #8ff0a4;
@define-color success_bg_color #8ff0a4;
@define-color success_fg_color #ffffff;
@define-color warning_color #f9f06b;
@define-color warning_bg_color #f9f06b;
@define-color warning_fg_color rgba(0, 0, 0, 0.8);
@define-color error_color #f66151;
@define-color error_bg_color #f66151;
@define-color error_fg_color #ffffff;
@define-color window_bg_color #241f31;
@define-color window_fg_color #ffffff;
@define-color view_bg_color #000000;
@define-color view_fg_color #ffffff;
@define-color headerbar_bg_color #241f31;
@define-color headerbar_fg_color #ffffff;
@define-color headerbar_border_color #ffffff;
@define-color headerbar_backdrop_color @window_bg_color;
@define-color headerbar_shade_color rgba(0, 0, 0, 0.36);
@define-color card_bg_color rgba(255, 255, 255, 0.08);
@define-color card_fg_color #ffffff;
@define-color card_shade_color rgba(0, 0, 0, 0.36);
@define-color dialog_bg_color rgb(41,29,79);
@define-color dialog_fg_color #ffffff;
@define-color popover_bg_color rgb(41,29,79);
@define-color popover_fg_color rgb(230,140,255);
@define-color shade_color rgba(0, 0, 0, 0.36);
@define-color scrollbar_outline_color rgba(0, 0, 0, 0.5);
@define-color blue_1 #99c1f1;
@define-color blue_2 #62a0ea;
@define-color blue_3 #3584e4;
@define-color blue_4 #1c71d8;
@define-color blue_5 #1a5fb4;
@define-color green_1 #8ff0a4;
@define-color green_2 #57e389;
@define-color green_3 #33d17a;
@define-color green_4 #2ec27e;
@define-color green_5 #26a269;
@define-color yellow_1 #f9f06b;
@define-color yellow_2 #f8e45c;
@define-color yellow_3 #f6d32d;
@define-color yellow_4 #f5c211;
@define-color yellow_5 #e5a50a;
@define-color orange_1 #ffbe6f;
@define-color orange_2 #ffa348;
@define-color orange_3 #ff7800;
@define-color orange_4 #e66100;
@define-color orange_5 #c64600;
@define-color red_1 #f66151;
@define-color red_2 #ed333b;
@define-color red_3 #e01b24;
@define-color red_4 #c01c28;
@define-color red_5 #a51d2d;
@define-color purple_1 #dc8add;
@define-color purple_2 #c061cb;
@define-color purple_3 #9141ac;
@define-color purple_4 #813d9c;
@define-color purple_5 #613583;
@define-color brown_1 #cdab8f;
@define-color brown_2 #b5835a;
@define-color brown_3 #986a44;
@define-color brown_4 #865e3c;
@define-color brown_5 #63452c;
@define-color light_1 #ffffff;
@define-color light_2 #f6f5f4;
@define-color light_3 #deddda;
@define-color light_4 #c0bfbc;
@define-color light_5 #9a9996;
@define-color dark_1 #77767b;
@define-color dark_2 #5e5c64;
@define-color dark_3 #3d3846;
@define-color dark_4 #241f31;
@define-color dark_5 #000000;

sq_button.sp1_3,
sq_button.sp2_3,
sq_button.sp4_3,
sq_button.sp5_3,
sq_button.vert_spacer,
sq_button.sp1_3:active,
sq_button.sp2_3:active,
sq_button.sp4_3:active,
sq_button.sp5_3:active,
sq_button.vert_spacer
{
    background: #000000;
    border-color: #000000;
    color: #000000;
}

sq_button
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(190,102,218), 1.0);
}

sq_button:active
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(230,140,255), 1.0);
}

sq_button.default_punct
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(190,102,218), 1.0);
}

sq_button.default_punct:active
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(230,140,255), 1.0);
}

sq_button.default_foreign
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(190,102,218), 1.0);
}

sq_button.default_foreign:active
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(230,140,255), 1.0);
}

sq_button.default_calc
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(190,102,218), 1.0);
}

sq_button.default_calc:active
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(230,140,255), 1.0);
}

sq_button.default_prgm
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(190,102,218), 1.0);
}

sq_button.default_prgm:active
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(230,140,255), 1.0);
}

sq_button.default_curr
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(190,102,218), 1.0);
}

sq_button.default_curr:active
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(230,140,255), 1.0);
}

sq_button.default_misc
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(190,102,218), 1.0);
}

sq_button.default_misc:active
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(230,140,255), 1.0);
}

sq_button.altline,
sq_button.special,
sq_button.wide {
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(190,102,218), 1.0);
}

sq_button:active,
sq_button.altline:active,
sq_button.special:active,
sq_button.wide:active {
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(230,140,255), 1.0);
}

sq_button.latched,
sq_button.altline.latched
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    background: mix(@theme_bg_color, rgb(230,140,255), 1.0);
}

sq_button.locked,
sq_button.altline.locked
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    background: mix(@theme_selected_bg_color, rgb(230,140,255), 1.0);
}

#Return {
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(190,102,218), 1.0);
}

#Return:active {
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, rgb(190,102,218), 1.0);
    background: mix(@theme_bg_color, rgb(230,140,255), 1.0);
}

phosh-top-panel {
    color: rgb(230,140,255);
}

phosh-home {
    color: rgb(230,140,255);
}

phosh-lockscreen {
    color: rgb(230,140,255);
}

I also altered the landscape keyboard, moving the numbers from the right to the left so that the main keyboard is roughly centered. For completeness, I will include both portrait and landscape keyboard files below.

For anyone interested, backup the us.yaml and us_wide.yaml files located in ~/.local/share/squeekboard/keyboards/ before replacing them with these files:

us.yaml 
---
outlines:
    default:         { width: 48,  height: 55 }
    default_punct:   { width: 48,  height: 55 }
    default_foreign: { width: 48,  height: 55 }
    default_calc:    { width: 48,  height: 55 }
    default_prgm:    { width: 48,  height: 55 }
    default_curr:    { width: 48,  height: 55 }
    default_misc:    { width: 48,  height: 55 }
    sp1_3:           { width: 16,  height: 55 }
    sp2_3:           { width: 32,  height: 55 }
    action:          { width: 64,  height: 55 }
    wide:            { width: 80,  height: 55 }
    sp5_3:           { width: 80,  height: 52 }
    action_short:    { width: 64,  height: 52 }
    altline:         { width: 80,  height: 52 }
    spaceline:       { width: 244, height: 52 }
    special:         { width: 60,  height: 52 }
    return_bsp:      { width: 64,  height: 52 }
    vert_spacer:     { width: 100, height: 0 }

views:
    base:
        - "Shift_b_ls Ctrl Alt ↑  ↓  ←  →  BackSpace"
        - "      1  2  3  4  5  6  7  8  9  0  -"
        - "sp1_3  q  w  e  r  t  y  u  i  o  p     sp2_3"
        - "sp2_3   a  s  d  f  g  h  j  k  l  ;    sp1_3"
        - "      '  z  x  c  v  b  n  m  ,  .  /"
        - "Shift_L preferences space  show_actions Return"
        - "vert_spacer"
    upper:
        - "Shift_u_us Ctrl Alt ↑  ↓  ←  →  BackSpace"
        - "      !  @  #  $  %  ^  &  *  (  )  _"
        - "sp1_3  Q  W  E  R  T  Y  U  I  O  P     sp2_3"
        - "sp2_3   A  S  D  F  G  H  J  K  L  :    sp1_3"
        - "     \"  Z  X  C  V  B  N  M  <  >  ?"
        - "Shift_L preferences space  show_actions Return"
        - "vert_spacer"
    lsyms:
        - "Shift_b_ls Ctrl Alt ↑  ↓  ←  →  BackSpace"
        - "      `  à  â  á  é  î  ü  ô  ö  û  ó"
        - "sp1_3  þ  ð  č  ĵ  š  ž  ǧ  ß  ʒ  ğ     sp2_3"
        - "sp2_3   θ  μ  π  σ  τ  φ  =  ·  +  minus    sp1_3"
        - "      \\ |  bang  pct  amp  caret  mulsplat  divslash  √  ×  ÷"
        - "Shift_S preferences space  show_actions Return"
        - "vert_spacer"
    usyms:
        - "Shift_u_us Ctrl Alt ↑  ↓  ←  →  BackSpace"
        - "      ~  À  Â  Á  É  Î  Ü  Ô  Ö  Û  Ó"
        - "sp1_3  Þ  Đ  Č  Ĵ  Š  Ž  Ǧ  ʃ  Ʒ  Ğ     sp2_3"  
        - "sp2_3   «  »  Σ  Δ  ¶  °  ®  ©  dollar  £    sp1_3"
        - "      lst  gtt  lparen  rparen  [  ]  {  }  hash  €  ¥"
        - "Shift_S preferences space  show_actions Return"
        - "vert_spacer"
    actions:
        - "sp5_3     Ctrl   Alt    ↑       ↓     ←       →  BackSpace"
        - "show_lower     F1     F2     F3     F4     Insert Home   PgUp"
        - "show_upper     F5     F6     F7     F8     Del    End    PgDn"
        - "show_lsyms     F9     F10    F11    F12    Esc    Up     Pause"
        - "show_usyms     Menu   Esc    Tab    Break  Left   Down   Right"
        - "sp5_3     preferences space show_actions Return"
        - "vert_spacer"

buttons:


    sp1_3:
        outline: "sp1_3"
        keysym: " "
        text: " "
    sp2_3:
        outline: "sp2_3"
        keysym: " "
        text: " "
    sp5_3:
        outline: "sp5_3"
        keysym: " "
        text: " "
    vert_spacer:
        outline: "vert_spacer"
        text: " "
        keysym: " " 


    Shift_L:
        action:
            locking:
                lock_view: "upper"
                unlock_view: "base"
        outline: "altline"
        icon: "key-shift"
    Shift_S:
        action:
            locking:
                lock_view: "usyms"
                unlock_view: "lsyms"
        outline: "altline"
        icon: "key-shift"
    Shift_b_ls:
        action:
            locking:
                lock_view: "lsyms"
                unlock_view: "base"
        outline: "altline"
        label: "àτ÷"
    Shift_u_us:
        action:
            locking:
                lock_view: "usyms"
                unlock_view: "upper"
        outline: "altline"
        label: "ÀΣ€"             
    show_actions:
        action:
            locking:
                lock_view: "actions"
                unlock_view: "base"
        outline: "altline"
        label: "Fn"



    preferences:
        action: "show_prefs"
        outline: "special"
        icon: "keyboard-mode-symbolic"
    space:
        outline: "spaceline"
        text: " "
    Return:
        outline: "return_bsp"
        icon: "key-enter"
        keysym: "Return"
    BackSpace:
        outline: "return_bsp"
        icon: "edit-clear-symbolic"
        action: erase




    Ctrl:
        modifier: "Control"
        outline: "action_short"
        label: "Ctrl"
    Alt:
        modifier: "Alt"
        outline: "action_short"
        label: "Alt"
    "↑":
        outline: "action_short"
        keysym: "Up"
    "↓":
        outline: "action_short"
        keysym: "Down"
    "←":
        outline: "action_short"
        keysym: "Left"
    "→":
        outline: "action_short"
        keysym: "Right"



    "-":
        outline: "default_punct"
    ";":
        outline: "default_punct"
    "'":
        outline: "default_punct"
    ",":
        outline: "default_punct"
    ".":
        outline: "default_punct"
    "?":
        outline: "default_punct"


    "!":
        outline: "default_punct"
    "@":
        outline: "default_punct"
    "#":
        outline: "default_punct"
    "$":
        outline: "default_punct"
    "%":
        outline: "default_punct"
    "^":
        outline: "default_punct"
    "&":
        outline: "default_punct"
    "*":
        outline: "default_punct"
    "(":
        outline: "default_punct"
    ")":
        outline: "default_punct"
    "_":
        outline: "default_punct"
    ":":
        outline: "default_punct"
    "\"":
        outline: "default_punct"
    "<":
        outline: "default_punct"
    ">":
        outline: "default_punct"
    "/":
        outline: "default_punct"


    "`":
        outline: "default_punct"
    "à":
        outline: "default_foreign"
    "â":
        outline: "default_foreign"
    "á":
        outline: "default_foreign"
    "é":
        outline: "default_foreign"
    "î":
        outline: "default_foreign"
    "ü":
        outline: "default_foreign"
    "ô":
        outline: "default_foreign"
    "ö":
        outline: "default_foreign"
    "û":
        outline: "default_foreign"
    "ó":
        outline: "default_foreign"
    "þ":
        outline: "default_foreign"
    "ð":
        outline: "default_foreign"
    "č":
        outline: "default_foreign"
    "ĵ":
        outline: "default_foreign"
    "š":
        outline: "default_foreign"
    "ž":
        outline: "default_foreign"
    "ǧ":
        outline: "default_foreign"
    "ß":
        outline: "default_foreign"
    "ʒ":
        outline: "default_foreign"
    "ğ":
        outline: "default_foreign"
    "θ":
        outline: "default_foreign"
    "μ":
        outline: "default_foreign"
    "π":
        outline: "default_foreign"
    "σ":
        outline: "default_foreign"
    "τ":
        outline: "default_foreign"
    "φ":
        outline: "default_foreign"
    "=":
        outline: "default_calc"
    "·":
        outline: "default_calc"
    "+":
        outline: "default_calc"
    minus:
        outline: "default_calc"
        text: "-"
    "\\":
        outline: "default_prgm"
    "|":
        outline: "default_prgm"
    bang:
        outline: "default_prgm"
        text: "!"
    pct:
        outline: "default_prgm"
        text: "%"
    amp:
        outline: "default_prgm"
        text: "&"
    caret:
        outline: "default_prgm"
        text: "^"
    mulsplat:
        outline: "default_calc"
        text: "*"
    divslash:
        outline: "default_calc"
        text: "/"
    "√":
        outline: "default_calc"
    "×":
        outline: "default_calc"
    "÷":
        outline: "default_calc"


    "~":
        outline: "default_punct"
    "À":
        outline: "default_foreign"
    "Â":
        outline: "default_foreign"
    "Á":
        outline: "default_foreign"
    "É":
        outline: "default_foreign"
    "Î":
        outline: "default_foreign"
    "Ü":
        outline: "default_foreign"
    "Ô":
        outline: "default_foreign"
    "Ö":
        outline: "default_foreign"
    "Û":
        outline: "default_foreign"
    "Ó":
        outline: "default_foreign"
    "Þ":
        outline: "default_foreign"
    "Đ":
        outline: "default_foreign"
    "Č":
        outline: "default_foreign"
    "Ĵ":
        outline: "default_foreign"
    "Š":
        outline: "default_foreign"
    "Ž":
        outline: "default_foreign"
    "Ǧ":
        outline: "default_foreign"
    "ʃ":
        outline: "default_foreign"
    "Ʒ":
        outline: "default_foreign"
    "Ğ":
        outline: "default_foreign"
    "Σ":
        outline: "default_foreign"
    "Δ":
        outline: "default_foreign"
    "«":
        outline: "default_foreign"
    "»":
        outline: "default_foreign"
    hash:
        outline: "default_prgm"
        text: "#"
    "°":
        outline: "default_misc"
    "®":
        outline: "default_misc"
    "©":
        outline: "default_misc"
    dollar:
        outline: "default_curr"
        text: "$"
    "£":
        outline: "default_curr"
    lst:
        outline: "default_prgm"
        text: "<"
    gtt:
        outline: "default_prgm"
        text: ">"
    lparen:
        label: "("
        outline: "default_prgm"
        text: "("
    rparen:
        outline: "default_prgm"
        text: ")"  
    "[":
        outline: "default_prgm"
    "]":
        outline: "default_prgm"
    "{":
        outline: "default_prgm"
    "}":
        outline: "default_prgm"
    "¶":
        outline: "default_misc"
    "€":
        outline: "default_curr"
    "¥":
        outline: "default_curr"









    show_lower:
        action:
            set_view: "base"
        outline: "wide"
        label: "abc"
    show_upper:
        action:
            set_view: "upper"
        outline: "wide"
        label: "ABC"
    show_lsyms:
        action:
            set_view: "lsyms"
        outline: "wide"
        label: "àτ÷"
    show_usyms:
        action:
            set_view: "usyms"
        outline: "wide"
        label: "ÀΣ€"
    F1:
        outline: "action"
        keysym: "F1"
    F2:
        outline: "action"
        keysym: "F2"
    F3:
        outline: "action"
        keysym: "F3"
    F4:
        outline: "action"
        keysym: "F4"
    F5:
        outline: "action"
        keysym: "F5"
    F6:
        outline: "action"
        keysym: "F6"
    F7:
        outline: "action"
        keysym: "F7"
    F8:
        outline: "action"
        keysym: "F8"
    F9:
        outline: "action"
        keysym: "F9"
    F10:
        outline: "action"
        keysym: "F10"
    F11:
        outline: "action"
        keysym: "F11"
    F12:
        outline: "action"
        keysym: "F12"
    Esc:
        outline: "action"
        keysym: "Escape"
    Tab:
        outline: "action"
        keysym: "Tab"
    Del:
        outline: "action"
        keysym: "Delete"
    Insert:
        outline: "action"
        keysym: "Insert"
    Menu:
        outline: "action"
        keysym: "Menu"
    Pause:
        outline: "action"
        keysym: "Pause"
    Break:
        outline: "action"
        keysym: "Break"
    Home:
        outline: "action"
        keysym: "Home"
    End:
        outline: "action"
        keysym: "End"
    PgUp:
        outline: "action"
        keysym: "Page_Up"
    PgDn:
        outline: "action"
        keysym: "Page_Down"
    Up:
        label: "↑"
        outline: "action"
        keysym: "Up"
    Left:
        label: "←"
        outline: "action"
        keysym: "Left"
    Down:
        label: "↓"
        outline: "action"
        keysym: "Down"
    Right:
        label: "→"
        outline: "action"
        keysym: "Right"
us_wide.yaml 
---
outlines:
    default:         { width: 48,  height: 70 }
    default_punct:   { width: 48,  height: 70 }
    default_foreign: { width: 48,  height: 70 }
    default_calc:    { width: 48,  height: 70 }
    default_prgm:    { width: 48,  height: 70 }
    default_curr:    { width: 48,  height: 70 }
    default_misc:    { width: 48,  height: 70 }
    sp1_3:           { width: 16,  height: 70 }
    sp2_3:           { width: 32,  height: 70 }
    sp4_3:           { width: 64,  height: 70 }
    action:          { width: 64,  height: 70 }
    altline:         { width: 80,  height: 70 }
    double:          { width: 96,  height: 70 }
    wide5:           { width: 80,  height: 70 }
    spaceline:       { width: 212, height: 70 }
    widespaceline:   { width: 292, height: 70 }
    special:         { width: 60,  height: 70 }

views:
    base:
        - "7  8  9  minus  =  sp2_3  q  w  e  r  t  y  u  i  o  p  [  ]  BackSpace  sp2_3  Insert  Home  PgUp"
        - "4  5  6  +  ·  sp2_3  sp1_3  a  s  d  f  g  h  j  k  l  ;  '  Return  sp2_3  Del  End  PgDn"
        - "1  2  3  ÷  √  sp2_3  sp2_3  z  x  c  v  b  n  m  ,  .  /  `  \\ sp2_3  sp2_3  sp4_3  ↑  sp4_3"
        - "Zero  DecimalPt  ×  percent  sp2_3  Shift_L preferences Ctrl space  Alt Shift_b_ls  show_actions sp2_3  ←  ↓  →"
    upper:
        - "7  8  9  minus  =  sp2_3  Q  W  E  R  T  Y  U  I  O  P  {  }  BackSpace  sp2_3  Insert  Home  PgUp"
        - "4  5  6  +  ·  sp2_3  sp1_3  A  S  D  F  G  H  J  K  L  :  \"  Return  sp2_3  Del  End  PgDn"
        - "1  2  3  ÷  √  sp2_3  sp2_3  Z  X  C  V  B  N  M  <  >  ?  ~  |  sp2_3  sp2_3  sp4_3  ↑  sp4_3"
        - "Zero  DecimalPt  ×  percent  sp2_3  Shift_L preferences Ctrl space  Alt Shift_u_us  show_actions sp2_3  ←  ↓  →"
    lsyms:
        - "7  8  9  minus  =  sp2_3  à  â  á  é  î  ü  ô  ö  û  ó  &  *  BackSpace  sp2_3  Insert  Home  PgUp"
        - "4  5  6  +  ·  sp2_3  sp1_3  þ  ð  č  ĵ  š  ž  ǧ  ß  ʒ  ğ  -  Return  sp2_3  Del  End  PgDn"
        - "1  2  3  ÷  √  sp2_3  sp2_3   θ  μ  π  σ  τ  φ  !  @  #  $  %  ^   sp2_3  sp2_3  sp4_3  ↑  sp4_3"
        - "Zero  DecimalPt  ×  percent  sp2_3  Shift_S preferences Ctrl space  Alt Shift_b_ls show_actions sp2_3  ←  ↓  →"
    usyms:
        - "7  8  9  minus  =  sp2_3  À  Â  Á  É  Î  Ü  Ô  Ö  Û  Ó  (  )  BackSpace  sp2_3  Insert  Home  PgUp"
        - "4  5  6  +  ·  sp2_3  sp1_3  Þ  Đ  Č  Ĵ  Š  Ž  Ǧ  ʃ  Ʒ  Ğ  _  Return  sp2_3  Del  End  PgDn"  
        - "1  2  3  ÷  √  sp2_3  sp2_3   «  »  Σ  Δ  ¶  °  ®  ©  dollar  £  €  ¥    sp2_3  sp2_3  sp4_3  ↑  sp4_3"
        - "Zero  DecimalPt  ×  percent  sp2_3  Shift_S preferences Ctrl space Alt  Shift_u_us  show_actions sp2_3  ←  ↓  →"
    actions:
        - "7  8  9  minus  =  sp2_3  show_lower  sp1_3 Esc  sp2_3  F1     F2     F3     F4     sp2_3 WideBackSpace  sp2_3  Insert  Home  PgUp"
        - "4  5  6  +  ·  sp2_3  show_upper  sp1_3 Tab sp2_3 F5     F6   F7   F8    sp2_3  Pause   sp2_3  Del  End  PgDn"
        - "1  2  3  ÷  √  sp2_3  show_lsyms  sp1_3   Menu  sp2_3  F9  F10  F11  F12   sp2_3  Break  sp2_3  sp4_3  ↑      sp4_3"
        - "Zero  DecimalPt  ×  percent  sp2_3  show_usyms preferences Ctrl widespace Alt  show_actions  sp2_3  ←  ↓  →"

buttons:



    sp1_3:
        outline: "sp1_3"
        keysym: " "
        text: " "
    sp2_3:
        outline: "sp2_3"
        keysym: " "
        text: " "
    sp4_3:
        outline: "sp4_3"
        keysym: " "
        text: " "



    Shift_L:
        action:
            locking:
                lock_view: "upper"
                unlock_view: "base"
        outline: "altline"
        icon: "key-shift"
    Shift_S:
        action:
            locking:
                lock_view: "usyms"
                unlock_view: "lsyms"
        outline: "altline"
        icon: "key-shift"
    Shift_b_ls:
        action:
            locking:
                lock_view: "lsyms"
                unlock_view: "base"
        outline: "altline"
        label: "àτ÷"
    Shift_u_us:
        action:
            locking:
                lock_view: "usyms"
                unlock_view: "upper"
        outline: "altline"
        label: "ÀΣ€"             
    show_actions:
        action:
            locking:
                lock_view: "actions"
                unlock_view: "base"
        outline: "altline"
        label: "Fn"






    preferences:
        action: "show_prefs"
        outline: "special"
        icon: "keyboard-mode-symbolic"
    space:
        outline: "spaceline"
        text: " "
    widespace:
        outline: "widespaceline"
        text: " "
    Return:
        outline: "double"
        icon: "key-enter"
        keysym: "Return"
    BackSpace:
        outline: "action"
        icon: "edit-clear-symbolic"
        action: erase



    Ctrl:
        modifier: "Control"
        outline: "action"
        label: "Ctrl"
    Alt:
        modifier: "Alt"
        outline: "action"
        label: "Alt"
    "↑":
        outline: "action"
        keysym: "Up"
    "↓":
        outline: "action"
        keysym: "Down"
    "←":
        outline: "action"
        keysym: "Left"
    "→":
        outline: "action"
        keysym: "Right"





    "-":
        outline: "default_punct"
    ";":
        outline: "default_punct"
    "'":
        outline: "default_punct"
    ",":
        outline: "default_punct"
    ".":
        outline: "default_punct"
    "?":
        outline: "default_punct"


    "!":
        outline: "default_punct"
    "@":
        outline: "default_punct"
    "#":
        outline: "default_punct"
    "$":
        outline: "default_punct"
    "%":
        outline: "default_punct"
    "^":
        outline: "default_punct"
    "&":
        outline: "default_punct"
    "*":
        outline: "default_punct"
    "(":
        outline: "default_punct"
    ")":
        outline: "default_punct"
    "_":
        outline: "default_punct"
    ":":
        outline: "default_punct"
    "\"":
        outline: "default_punct"
    "<":
        outline: "default_punct"
    ">":
        outline: "default_punct"
    "/":
        outline: "default_punct"


    "`":
        outline: "default_punct"
    "à":
        outline: "default_foreign"
    "â":
        outline: "default_foreign"
    "á":
        outline: "default_foreign"
    "é":
        outline: "default_foreign"
    "î":
        outline: "default_foreign"
    "ü":
        outline: "default_foreign"
    "ô":
        outline: "default_foreign"
    "ö":
        outline: "default_foreign"
    "û":
        outline: "default_foreign"
    "ó":
        outline: "default_foreign"
    "þ":
        outline: "default_foreign"
    "ð":
        outline: "default_foreign"
    "č":
        outline: "default_foreign"
    "ĵ":
        outline: "default_foreign"
    "š":
        outline: "default_foreign"
    "ž":
        outline: "default_foreign"
    "ǧ":
        outline: "default_foreign"
    "ß":
        outline: "default_foreign"
    "ʒ":
        outline: "default_foreign"
    "ğ":
        outline: "default_foreign"
    "θ":
        outline: "default_foreign"
    "μ":
        outline: "default_foreign"
    "π":
        outline: "default_foreign"
    "σ":
        outline: "default_foreign"
    "τ":
        outline: "default_foreign"
    "φ":
        outline: "default_foreign"
    "=":
        outline: "default_calc"
    "·":
        outline: "default_calc"
    "+":
        outline: "default_calc"
    minus:
        outline: "default_calc"
        text: "-"
    percent:
        outline: "default_calc"
        text: "%"
    "\\":
        outline: "default_punct"
    "|":
        outline: "default_punct"
    bang:
        outline: "default_punct"
        text: "!"
    pct:
        outline: "default_punct"
        text: "%"
    amp:
        outline: "default_punct"
        text: "&"
    caret:
        outline: "default_punct"
        text: "^"
    mulsplat:
        outline: "default_calc"
        text: "*"
    divslash:
        outline: "default_calc"
        text: "/"
    "√":
        outline: "default_calc"
    "×":
        outline: "default_calc"
    "÷":
        outline: "default_calc"


    "~":
        outline: "default_punct"
    "À":
        outline: "default_foreign"
    "Â":
        outline: "default_foreign"
    "Á":
        outline: "default_foreign"
    "É":
        outline: "default_foreign"
    "Î":
        outline: "default_foreign"
    "Ü":
        outline: "default_foreign"
    "Ô":
        outline: "default_foreign"
    "Ö":
        outline: "default_foreign"
    "Û":
        outline: "default_foreign"
    "Ó":
        outline: "default_foreign"
    "Þ":
        outline: "default_foreign"
    "Đ":
        outline: "default_foreign"
    "Č":
        outline: "default_foreign"
    "Ĵ":
        outline: "default_foreign"
    "Š":
        outline: "default_foreign"
    "Ž":
        outline: "default_foreign"
    "Ǧ":
        outline: "default_foreign"
    "ʃ":
        outline: "default_foreign"
    "Ʒ":
        outline: "default_foreign"
    "Ğ":
        outline: "default_foreign"
    "Σ":
        outline: "default_foreign"
    "Δ":
        outline: "default_foreign"
    "«":
        outline: "default_foreign"
    "»":
        outline: "default_foreign"
    hash:
        outline: "default_punct"
        text: "#"
    "°":
        outline: "default_misc"
    "®":
        outline: "default_misc"
    "©":
        outline: "default_misc"
    dollar:
        outline: "default_curr"
        text: "$"
    "£":
        outline: "default_curr"
    lst:
        outline: "default_punct"
        text: "<"
    gtt:
        outline: "default_punct"
        text: ">"
    lparen:
        label: "("
        outline: "default_punct"
        text: "("
    rparen:
        outline: "default_punct"
        text: ")"  
    "[":
        outline: "default_punct"
    "]":
        outline: "default_punct"
    "{":
        outline: "default_punct"
    "}":
        outline: "default_punct"
    "¶":
        outline: "default_misc"
    "€":
        outline: "default_curr"
    "¥":
        outline: "default_curr"









    show_lower:
        action:
            set_view: "base"
        outline: "altline"
        label: "abc"
    show_upper:
        action:
            set_view: "upper"
        outline: "altline"
        label: "ABC"
    show_lsyms:
        action:
            set_view: "lsyms"
        outline: "altline"
        label: "àτ÷"
    show_usyms:
        action:
            set_view: "usyms"
        outline: "altline"
        label: "ÀΣ€"
    F1:
        outline: "wide5"
        keysym: "F1"
    F2:
        outline: "wide5"
        keysym: "F2"
    F3:
        outline: "wide5"
        keysym: "F3"
    F4:
        outline: "wide5"
        keysym: "F4"
    F5:
        outline: "wide5"
        keysym: "F5"
    F6:
        outline: "wide5"
        keysym: "F6"
    F7:
        outline: "wide5"
        keysym: "F7"
    F8:
        outline: "wide5"
        keysym: "F8"
    F9:
        outline: "wide5"
        keysym: "F9"
    F10:
        outline: "wide5"
        keysym: "F10"
    F11:
        outline: "wide5"
        keysym: "F11"
    F12:
        outline: "wide5"
        keysym: "F12"
    Esc:
        outline: "wide5"
        keysym: "Escape"
    WideBackSpace:
        outline: "wide5"
        icon: "edit-clear-symbolic"
        action: erase
    Tab:
        outline: "wide5"
        keysym: "Tab"
    Del:
        outline: "action"
        keysym: "Delete"
    Insert:
        outline: "action"
        keysym: "Insert"
    Menu:
        outline: "wide5"
        keysym: "Menu"
    Pause:
        outline: "wide5"
        keysym: "Pause"
    Break:
        outline: "wide5"
        keysym: "Break"
    Home:
        outline: "action"
        keysym: "Home"
    End:
        outline: "action"
        keysym: "End"
    PgUp:
        outline: "action"
        keysym: "Page_Up"
    PgDn:
        outline: "action"
        keysym: "Page_Down"
    Up:
        label: "↑"
        outline: "action"
        keysym: "Up"
    Left:
        label: "←"
        outline: "action"
        keysym: "Left"
    Down:
        label: "↓"
        outline: "action"
        keysym: "Down"
    Right:
        label: "→"
        outline: "action"
        keysym: "Right"
    Zero:
        outline: "double"
        text: "0"
    DecimalPt:
        text: "."



    period:
        outline: "altline"
        text: "."
    colon:
        text: ":"
1 Like
71

It’s much better to create a new *.css file like firefoxColors.css and add just one line into gtk.css: @import url("firefoxColors.css"); If you use another directory, it has to be insert to the url. As you see, it’s similar to what you’re doing on userChrome.css.

72

This is really unfortunate, it would make it so much easier for people if you could host the variants in git branches on some code hosting service, be it forgejo on FrankyFlawless’s server, codeberg.org or sr.ht forked from upstream postmarketOS / mobile-config-firefox · GitLab.

Cloning a git repo and running make install is so much easier than copying a bunch of stuff from forums and making things work somehow.

I have tried to do to bring this into gitlab some weeks ago (with the goal of creating a MR for upstream with the parts that are go beyond ‘different colors’), and (admittedly partially due to not being familiar how firefox-mobile-config combines things) it took me more than an hour) to come up with this Files · user0-css-changes_true_mobile_style-1peter10 · Peter M / mobile-config-firefox · GitLab

I’ll do this again soon, but as I don’t have that much time and enough projects I need to attend, I can’t promise a timeline. I really want to encourage you to put this into some kind of git repo somewhere to make it easier to review your (IMHO great) work to then bring it to PureOS or postmarketOS users without an hour of tediously copying things - I struggle to do this, and I know that people like @dos or ollieparanoid are ususally more busy than I am.

3 Likes
73

@Lliure has uploaded the code to Codeberg on @user0’s behalf.

2 Likes
74

Honestly, I know nothing about creating, cloning, mirroring, and managing repos, and it’s really intimidating.

From all hosting options I’ve seen, Codeberg seems to be the best and the only one that I would be willing to try, but they require a non-disposable email address for communications. I hate email and other platforms that are unsecure and unencrypted by default and require javascript or an app, and I don’t like being forced to use it. This is why I use kbin instead of mastodon. Kbin allows browsing, creating an account, and logging in without javascript, while seemingly all mastodon instances require javascript just to browse, and using mastodon in an app requires an account.

Even if I could easily create an account on a site like Codeberg with no email or javascript requirements, I would still have to learn everything necessary to actually use it. It’s just too much of a hassle for me to deal with all of that. I’m not a software engineer/developer/programmer; I’m just a privacy-oriented linux user.

Thankfully, @Lliure has created a “Git mirror” for my code, making it easier for people to download it.

4 Likes
75

I understand your perspective very well: I spent the last few years trying to get rid of using an email address and phone number for public correspondence. In the end, I decided to create a dedicated public identity that is easily correlated across the Internet to represent my interests.

Also, services that reject ephemeral email addresses may not be updated for all domain names, so with persistence you may be able to circumvent them. That largely depends of how much value you place in the service(s) to begin with.

I have yet to find a ephemeral email address service that does not require JavaScript while being usable for registrations.

2 Likes
76

While I’m fully sympathetic with that approach, you might also want to factor into your decision that if you use an ephemeral email for a social coding platform, users of your project may be unable to reach you with issues, pull requests, or mentions. This may or may not be what you want.

3 Likes
77

Usually the email address is used as a recovery method and email subscriptions to the repository’s activities on the social coding platform. The code maintainer can always use their main credentials to log in as long as they remember it to address those activities.

In other related news, I attempted to register a Codeberg account using an ephemeral email address, here was the response with slight modification:

Your registration was denied (noreply@codeberg.org)

Dear throwaway,

Welcome to Codeberg - we’re sorry to greet you with bad news. Codeberg is moderated by volunteers in their free time. We have to ensure that we save their nerves where possible. Because of that, we denied your registration for Codeberg.org, either because your mail provider is source of heavy spam waves (currently the case e.g. with gmail.com - we currently see no other option than preventing registrations from this source) or because a third-party blocklist we rely on considers example.com as a throwaway email provider. Blocking these saves us a lot of effort in dealing with spam accounts.

Thank you for understanding. Here are your options:

  • Register with another name and email, you can change your username later
  • wait - your account is removed after it wasn’t activated for 24 to 48 hours
  • Contact our support via help@codeberg.org and ask to change your email address, or explain to us why you’d like to this email address, so we can manually confirm it. (Please note that password recovery might require manual action on our side again).

Thank you for your patience.
Your Codeberg Team.

It is not clear what third-party blocklist they rely on, so I may as well attempt to circumvent it.

1 Like
78

Well, I already did it, here is what the successful response was, with slight modification:

Please activate your account (noreply@codeberg.org)

throwaway, please activate your account
Hi throwaway, thanks for registering at Codeberg.org!

Please click the following link to activate your account within 3 hours:

Codeberg.org

Not working? Try copying and pasting it to your browser.
Welcome to Codeberg.org

Codeberg e.V. – Arminiusstraße 2-4 – 10551 Berlin – Germany
Registered at registration court Amtsgericht Charlottenburg VR36929.

Since this is only an issue for @user0, I will send them a PM of the ephemeral email address service I was using to produce this result.

Codeberg uses ratelimiting based on IP addresses for registrations (up to 2 accounts), so it can be easily circumvented by VPNs or Tor.

2 Likes
79

I replied to your PM.

For anyone wondering, there is still no solution that is free of javascript and/or javascript-based captchas, but that’s okay. I don’t need my own repo.

2 Likes
80

https://sourcehut.org/ it is Libre of Javascript

2 Likes
81

Almost perfect:

I wonder what is the difference between having a Sourcehut account or not in this case.

Also:

Alpha caveats

However, we also hold some caveats regarding the alpha.

Payment will be required later

From the beta onwards, unpaid accounts will be limited to read-only access to their own projects. Affected users will be emailed at least 60 days in advance of the transition. Users who host their own instance of Sourcehut, on their own servers, will be unaffected by this. Additionally, financial aid will be provided to those who cannot pay; no one is going to be priced out.

The exact details of any billing changes will be discussed extensively with the community well in advance, and you are welcome to make yourself heard in these discussions.

See the billing FAQ for details.

Some services are incomplete

Some of our services are not complete, and you may notice conspicuously absent features. However, if you find the current featureset meets your needs, it may already be suitable for your use. Our documentation is also incomplete.

Some notable features which are still under development in the alpha period include:

  • First-class support for user groups/organizations
  • A web-based workflow for submitting and reviewing patches on lists.sr.ht
  • Full data autonomy, including account data import & export, account deletion, and username changes

The “beta” label is used on our bug trackers to indicate tickets which are prioritized for the beta.

The API is subject to change

We are developing a new GraphQL API which we intend to support onwards into the future. Users of the legacy API will be notified of any deprecations in advance, and assistance in migrating your software will be offered. The new API, once finalized, will be supported for at least 5 years.

Goals for the beta and beyond

The beta will be considered feature complete, but may be lacking in docs and polish, or have minor known bugs. “Feature complete” is defined as “meeting the basic goals in a stable and consistent package”, but doesn’t necessarily mean that no new features will be developed in the post-beta period. The beta period will be short, we will settle any issues which arise from the payment model changing, polish and document everything, and promote it to the production phase shortly thereafter.

2 Likes
82

I know I said that I was done updating files for a while now, but I did manage to fix the last minor issue, noted in the Final Updates (post 70).

1 Like
83

user0, Thank you for these latest changes, will try!

Going back in time:

I know, it totally is, git has a steep learning curve. But IMHO, getting into it is totally worth it (not just for employability), as version control is really powerful, even if you never intend to share what you do with someone else.

You edit a file, then git add FILENAME it and can then do git commit -m "In this commit message I describe what I changed and why". If you change something where you’re not really sure whether it’s a good idea (or that will take a while and is a distinct feature), you can open a new branch for it with git checkout -b this-is-my-new-branch-where-I-do-awesome stuff and do things there, while always being able to go back to main.

The commit history thing is great, as it allows you to go back, and, if you bothered to write good commit messages, remember why you did some tiny change years later. It’s quite handy.

(Yes, you can do the almost same with tons of copies of a file in multiple folders and, e.g., daily backups - but then you have no idea why you changed something.)

AFAIK what’s meant by this is that you can contribute to projects hosted on sourcehut via git and git-send-email without needing to register - basically by sending a patch to a mailing list that can then get discussed via email and merged.

2 Likes
84

Is there a way to use the context menu for tabs in Firefox mobile? Tap and hold used to bring up a menu where I could, among other things, send the tab to another device. That is very useful at times.

Tap and hold in the tabs list doesn’t bring up any menu at all.

1 Like
85

Question:

Answer:

If you would like to be able to tap & hold on a tab in order to use the context menu to do things like send the tab to another device, this is not currently possible using the Tab Manager Menu. You will need the Tab Bar for this functionality.

Solutions:

  1. For anyone interested, I have added a new fenix_theme.css file that is designed to be used with a mobile style in order to have the Firefox for Android (fenix) theme while preventing the Tab Bar from being hidden (in portrait mode).

  2. For those of you that prefer the simplicity of using one of the fenix_fox or fenix_one files, you can modify whichever one you are using in order to prevent the Tab Bar from being hidden. Note that I adjusted these files for this purpose, but the adjustment was not absolutely necessary. Check the Final Updates (post 70).

Steps for Option 1:

Follow the instructions in Styles & Screenshots (post 61) to enable a mobile style (not true mobile style) and make sure to enable fenix_theme.css if you want the Firefox for Android (fenix) theme applied.

Steps for Option 2:

For the following steps, you can ignore any modifications to files that you are not using.

  • To unhide the Tab Bar, comment out the following:

    • Line 508 of fenix_fox-alt.css
    • Line 537 of fenix_fox.css
    • Line 729 of fenix_one-alt.css
    • Line 758 of fenix_one.css

This:

    #tabbrowser-tabs,

Becomes this:

    /*#tabbrowser-tabs,*/

  • Then change 4px to 48px in the following:

    • Line 443 of fenix_fox-alt.css
    • Line 664 of fenix_one-alt.css

  • Then change 5px to 54px in the following:

    • Line 450 of fenix_fox-alt.css
    • Line 671 of fenix_one-alt.css

  • If you want, you can then add the single_tab_mode.css file or the single_tab_mode-alt.css file to your userChrome folder (depending on whether or not you are using an alt version of fenix_fox or fenix_one) and add the following to the top of your userChrome.css file:

@import "single_tab_mode.css";

or

@import "single_tab_mode-alt.css";
  • Or you can paste the contents of the single_tab_mode.css file or the single_tab_mode-alt.css file to the top of your userChrome.css file, but I recommend the previous option.

For the alt files, you are done.

For the other files, the Tab Bar will be at the top of the screen, while the Nav Bar is at the bottom of the screen.

  • If you want the Tab Bar & Nav Bar at the bottom of the screen, then delete the / at the end of the following:

    • Line 551 of fenix_fox.css
    • Line 772 of fenix_one.css

This:

    /* Move Nav Bar to bottom */

Becomes this:

    /* Move Nav Bar to bottom *

  • Then change 3.5px to 4.5px in the following:

    • Line 469 of fenix_fox.css
    • Line 690 of fenix_one.css

  • Then change 4.5px to 5.5px in the following:

    • Line 481 of fenix_fox.css
    • Line 702 of fenix_one.css

  • Then add the browser.css file to your userChrome folder and add the following to the bottom of your userChrome.css file:

@import "browser.css";
  • Or you can paste the contents of the browser.css file to the bottom of your userChrome.css file, but I recommend the previous option.

Conclusion:

And that is how you can use the Firefox for Android (fenix) theme with a mobile style or modify the fenix_fox and fenix_one files to unhide the Tab Bar, thereby converting a true mobile style into a mobile style.

1 Like
86

I realy appreciate your work!!!
the method you are providing all your hard work is, sorry for this, a mess for me. imagine a user without computer (like me) trying to style firefox-esr with your amazing work directly on the linux phone… see where… so,however, since nobody did anything for it and you said its FOSS, i moved everything into a huge deploy script:

https://gist.githubusercontent.com/magdesign/9d832dbffc2a2311224dd2cc8f3a454c/raw/8b995d3371f27a8c596483793d5bc0c8b57e48a6/gistfile1.txt

it should, as far as i could see on my small screen, create all needed files with all the content.
however, my firefox-esr looks still exactly the same and I am sure I missed a tiny little steps. so can please, some of you nerds with 2 big screens and a propper keyboard solve this quest and provide the missing piece so we have a fully automated deploy for fenix_firefox.

THANKS

edit:
so, i am on postmarketos, sxmo and i think the reason the styles do not apply is the ~/.mozilla/firefox/installs.ini file.

3 Likes
87

@user0:

Please replace @media (max-width: 700px) with @media (orientation: portrait) (or landscape for the other orientation). This way the modification is not device or scale specific, it works for every device and every scale.

The 700px for example doesn’t even work on Librem 5 100% screen scale, because it has a width of 720px. But 720px is already landscape on 200% scale. I think you understand the issue.

I found it out by trying to make some further improvements (I will share if results are better).

And maybe a minor improvement for better usablility:
Instead of creating 20 userChrome.css files for different styles it’s may better to create 20 different [stylename].css, combine all styles in userChrome and mark the lines as commentaries. The only line without commentary mark is the activated style. This way people do not need to replace anything and just need to choose which one should not be a commentary. It’s also easier to add new styles.

3 Likes