Mobile-Friendly Firefox Customizations for Librem 5

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.

https://codeberg.org/user0/Mobile-Friendly-Firefox

  • 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: ":"
2 Likes