Mobile-Friendly Firefox Customizations for Librem 5

Therefor you have to edit ~/config/gtk-3.0/gtk.css and write inside:

phosh-top-panel {
    color: ...;
}
phosh-home {
    color: ...;
}

Instead of ... you have 2 options to write color:

  1. in hex-code #12c5da or
  2. in rgba rgba(42, 107, 219, 0.3)

You can edit everything in phosh in this file, as far as I know. However, the red color is just a placeholder right now and I’m not sure if I turn it back to white or something else - depends on my overall design.

1 Like

Thank you.

I have added that to my gtk.css file, and my theme feels more complete now.

For anyone interested:

gtk.css
@define-color accent_color #dc8add;
@define-color accent_bg_color #dc8add;
@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 #241f31;
@define-color dialog_fg_color #ffffff;
@define-color popover_bg_color #241f31;
@define-color popover_fg_color #dc8add;
@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, #dc8add, 1.0);
    background: mix(@theme_bg_color, #dc8add, 1.0);
}

sq_button:active
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, #dc8add, 1.0);
    background: mix(@theme_bg_color, #ff00ff, 1.0);
}

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

sq_button.default_punct:active
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, #dc8add, 1.0);
    background: mix(@theme_bg_color, #ff00ff, 1.0);
}

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

sq_button.default_foreign:active
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, #dc8add, 1.0);
    background: mix(@theme_bg_color, #ff00ff, 1.0);
}

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

sq_button.default_calc:active
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, #dc8add, 1.0);
    background: mix(@theme_bg_color, #ff00ff, 1.0);
}

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

sq_button.default_prgm:active
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, #dc8add, 1.0);
    background: mix(@theme_bg_color, #ff00ff, 1.0);
}

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

sq_button.default_curr:active
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, #dc8add, 1.0);
    background: mix(@theme_bg_color, #ff00ff, 1.0);
}

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

sq_button.default_misc:active
{
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, #dc8add, 1.0);
    background: mix(@theme_bg_color, #ff00ff, 1.0);
}

sq_button.altline,
sq_button.special,
sq_button.wide {
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, #dc8add, 1.0);
    background: mix(@theme_bg_color, #dc8add, 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, #dc8add, 1.0);
    background: mix(@theme_bg_color, #ff00ff, 1.0);
}

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

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

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

#Return:active {
    color: mix(@theme_fg_color, #ffffff, 1.0);
    border-color: mix(@borders, #dc8add, 1.0);
    background: mix(@theme_bg_color, #ff00ff, 1.0);
}

phosh-top-panel {
    color: #dc8add;
}

phosh-home {
    color: #dc8add;
}

And thank you @SteveC for your Squeekboard keyboard customizations. I have edited them to fit the rest of my theme.

For anyone interested:

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

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

Nice guide, could the tabs be reduced in size instead of fill so there are say 3 tabs displayed at any time? iOS has swipeable tabs when using touch within address bar, not sure that is available for Firefox yet in Linux?

If you use landscape taps are organized as on desktop (shorten by themself etc). And of course you can change the size itself. I use 150% screen scale and shorten it to 2 tabs as you can see above on my screenshot. Give me a second, I’m looking for the code.

Edit:
So, here the lines:

    #tabbrowser-tabs {
        --tab-min-width: 45vw !important;

45 is the percentage of the screen width and since you have “new tab” buttons on the right, it should be less than 50.

1 Like

If I understand you correctly, you’re basically describing the desktop and hybrid desktop-mobile styles in my original post. The tabs_fill_available_width.css uses all available space for tabs, while the tabs_larger_min-width.css will allow up to 3 tabs to fit comfortably.

If you want to prevent tab-overflow when only 3 tabs are open with 1 pinned tab, then you should change the value of tabs_larger_min-width.css from 90px to 88px like this:

tabs_larger_min-width.css
/* Tab min-width resizing */
#tabbrowser-tabs .tabbrowser-tab[fadein]:not([pinned]) {
    min-width: 88px !important;
}

Here is an alternate version based on @Ick’s code in the previous post, but modified for 100% scale:

tabs_larger_min-width.css
/* Tab min-width resizing */
#tabbrowser-tabs {
    --tab-min-width: 24vw !important;
}

If you are instead wanting to show the current tab, the previous tab, and the next tab all at the same time while hiding all other inactive tabs, I don’t think it can be done in the way you want.

1 Like

Some important edits for 150% screen scale to reduce flickering:

@media (max-width: 700px) {
    #widget-overflow-mainView {
        height: 720px !important;
        max-height: 720px !important;
    } 
    #downloadsPanel {
        max-width: 100vw !important;
    }
    #appMenu-popup {
        height: 560px;
        max-height: 560px;
        margin-top: 6px !important;
    }
    #backForwardMenu {
        height: 410px;
        min-height: 200px;
        margin-top: 15px !important;
        width: 100vw !important;
    }
    #identity-popup {
        height: 220px !important;
    }
    #protections-popup {
        height: 575px !important;
        max-height: 575px !important;
    }
}

Tell me if you still have flickering with those changes I haven’t seen yet.

One important thing you should definitely do: put all your addon icons to the overflow menu (that icon that looks like this: »). It will also helps against addon flickering and save a lot of horizontal space.

1 Like

Question:

do any of these fix the addon’s popups from the main toolbar (like the ublock or containers window)
because the addons are not usable atm, the windows load slow, then bad if they show at all (also on the pinephone with mobian)

Yep, the last lines I wrote in last post (“put all your addons into overflow menu”). This way they’re using the overflow menu box instead of their own box and the overflow menu got changed in my lines above. I cannot guarantee that it works for every addon, but for most it should be fine right now.

sounds good i’ll give that a try!

@Emma, might I suggest you open a repository on Gitlab? It would make it easier for others to download your files, acts as a more permanent code repository than a forum post, allows others to propose improvements / fixes, and keeps a record of changes to help with bugs and regressions.

I had the thought of creating a repository for you, but then my name would be on the commits and of course it would be better to have you as the committer for credit of all your hard work. Plus you can choose the license you want.

I don’t trust Gitlab. Content is completely hidden from the user unless javascript is enabled, and (at least on Purism’s Gitlab) there is google captcha revealed when looking at the page source.

I also don’t trust Github since it was purchased by microsoft and then “updated” to block access to release page assets unless javascript is enabled. For example, check out the arkenfox github with javascript disabled in your browser. You will not be allowed to see the download link for the file in the Assets section, but this was possible before github was purchased by microsoft. In order to download assets, you must already know the download link or be persistent with guessing until you guess correctly.

For anyone interested:
Direct link to plaintext arkenfox user.js for Firefox 102 (latest ESR).

That’s why I post here. The Purism forums require javascript to login, but the content is not blocked from users who wish to read. If I couldn’t access this forum without javascript, I never would have made an account. And if this forum is ever “updated” to block access without javascript, I will never come back.

3 Likes

Fair enough, I respect that. What about Launchpad? It is hosted by Canonical but I don’t know what the Java requirements are. Justt looking at it with a glance it seems like maybe it could work without javascript. There could be other git repo hosting alternatives too.

1 Like

Thanks for the suggestion, but here is my experience:

Steps to create Launchpad account:

  1. Enable javascript or use Web Developer Tools to unhide the forms for creating an account.

  2. Fill out forms (email address is required).

  3. Verify email address.

Your account was created successfully. We have emailed EMAIL_ADDRESS (from noreply@login.ubuntu.com), please check your inbox to verify your email address.

The site ‘Launchpad’ requires that you verify your email address.

  1. Click link in email or copy into new tab.

  2. Click button:
    Yes, I'm sure

  3. Captcha-blocked:

Error: A captcha challenge is required to complete the request.

  1. Close browser and give up idea of ever creating account for Launchpad.

Also worth noting, besides not stating that they require captchas anywhere on their sites, the data privacy policy states that they use:

  • Google Tag Manager

  • Google Analytics

  • Facebook pixel

relevant quote from ubuntu data privacy policy about tracking

We use the following cookies:

Strictly necessary cookies. These are cookies that are required for the operation of our website. They include, for example, cookies that enable you to log into secure areas of our website, use a shopping cart or make use of e-billing services.

Analytical/performance cookies. They allow us to recognise and count the number of visitors and to see how visitors move around our website when they are using it. This helps us to improve the way our website works, for example, by ensuring that users are finding what they are looking for easily.

Functionality cookies. These are used to recognise you when you return to our website. This enables us to personalise our content for you, greet you by name and remember your preferences (for example, your choice of language or region).

Targeting cookies. These cookies record your visit to our website, the pages you have visited and the links you have followed. We will use this information to make our website and the advertising displayed on it more relevant to your interests. We may also share this information with third parties for this purpose.

Ubuntu is now equal to microsoft and other evil corporations in my eyes, completely untrustworthy.

2 Likes

Wow, I’m surprised and disappointed in Canonical. Sorry to hijack the thread. I suppose it’s pretty tough to find a non-self hosted version control system these days.

2 Likes

How about Codeberg? It runs on Forgejo, which is a fork of Gitea. Codeberg’s policy states that they only permit repositories licensed under an OSI/FSF-approved license.

If Codeberg doesn’t appeal to you, they do list alternatives in their about wiki page: https://docs.codeberg.org/getting-started/what-is-codeberg/#alternatives-to-codeberg

1 Like

Thanks for the suggestion, but here is my experience:

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, because a third-party blocklist we rely on considers EMAIL_ADDRESS as a throwaway email provider. Blocking these saves us a lot of effort in dealing with spam accounts.

I can understand that, but it means that Codeberg is not an option for me.

I may look into alternatives in the future, but it is really exhausting trying to find sites and services that are not malicious and that actually allow me to use them. I hope everyone reading this can understand that.

3 Likes

Just tried this by adding it to userChrome.css on the bottom. Ublock/ container menus still have weird behaviours

-ublock seems a bit more stable but a lot of stuff is still out of bounds (i use advanced settings
-account containers (by mozilla) flickers

I’ve added scale:0.5; to some stuff but it doesn’t seem to effect ublock or accounts. so i’m wondering which css class they use.

the appmenu for example does get scaled down

1 Like

I was just digging into debugging/inspecting the firefox UI and extensions. Still can’t seem to find the popup class.

in example: the appmenu i can inspect and find in the browsers html, but the extensions like ublock do not seem to be in there. I can inspect the extension html but that doesn’t show the outer popup element.

Does anybody know which class the extension popup window has?

1 Like

Works as expected.


Haven’t you used the overflow menu?

1 Like

i copied that bit in the previous post including the overflow menu.
But i’m not sure if that’s what you mean with ‘using the overflow menu’

Also my ublock menu is more expansive because i’m using the advanced mode:
(screenshot from pc to show the full menu)

on the phone it get to the first red bar and thats about it

1 Like