I have touched CSS-files for the first time one week ago. You can’t do anything wrong if you created a backup of the original file. If something doesn’t work, it will be ignored. And Firefox is nothing critical as long as you can restore it with your backup. If your reason is only “I don’t want to break things” … just do it. 
.
1 Like
I would recommend doing what I do myself. Keep a backup of the code in a safe place. If your Librem 5 ever updates the mobile-config-firefox package, you will notice it next time you use Firefox. Then you can just copy and paste the files back into your Firefox profile.
How did you change the colors of the statusbar Squeekboard items?
I just noticed that it makes more sense to move a piece of code from the numbered_tabs.css file into my single_tab_mode files with a unique value in each one, in order to have the tab content fill the tabs properly while leaving just enough room for the tab number.
This is the piece of code:
/* Shorten tab content width so that tab number is more visible */
.tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content {
width: calc(100vw - 150px) !important;
}
Here are the new versions:
numbered_tabs.css
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/numbered_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Show a number before tab text */
/* Actually, let's show the tab number after tab content, right-align it,
and fix its position directly on the tab close button */
#tabbrowser-tabs {
counter-reset: nth-tab 0; /* Change to -1 for 0-indexing */
}
.tabbrowser-tab:not([pinned]) .tab-content::after {
content: counter(nth-tab) " ";
counter-increment: nth-tab;
position: absolute !important;
position: fixed;
right: 24px;
top: 12px;
width: 0 !important;
}
/* Hide tab number when hovering so that tab close button is clickable */
.tabbrowser-tab:not([pinned]):hover .tab-content::after {
visibility: hidden !important;
}
/* Adjust tab close button opacity, border, and shape */
.tab-close-button {
position: absolute !important;
margin-right: -8px !important;
opacity: 0.5 !important;
border: 2px solid white !important;
height: 36px !important;
width: 36px !important;
}
}
single_tab_mode.css
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: hidden !important;
min-width: 0 !important;
}
/* Expand unpinned active tab */
.tabbrowser-tab:not([pinned])[selected] {
min-width: 100vw !important;
}
/* Shorten tab content width so that tab number is more visible */
.tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content {
width: calc(100vw - 30px) !important;
}
/* Hide Newtab and New-tab buttons */
#new-tab-button,
#tabs-newtab-button {
display: none !important;
}
}
single_tab_mode_with_space_for_1_item.css
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: hidden !important;
min-width: 0 !important;
}
/* Expand first unpinned tab */
#tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
max-width: 100vw !important;
}
/* Expand unpinned active tab */
.tabbrowser-tab:not([pinned])[selected] {
min-width: calc(100vw - 40px) !important;
}
/* Shorten tab content width so that tab number is more visible */
.tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content {
width: calc(100vw - 70px) !important;
}
}
single_tab_mode_with_space_for_2_items.css
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: hidden !important;
min-width: 0 !important;
}
/* Expand first unpinned tab */
#tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
max-width: 100vw !important;
}
/* Expand unpinned active tab */
.tabbrowser-tab:not([pinned])[selected] {
min-width: calc(100vw - 80px) !important;
}
/* Shorten tab content width so that tab number is more visible */
.tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content {
width: calc(100vw - 110px) !important;
}
}
single_tab_mode_with_space_for_3_items.css
/* Apply this customization only on smaller screens */
@media (max-width: 700px) {
/* Hide unpinned inactive tabs */
.tabbrowser-tab:not([pinned]):not([selected]) {
visibility: hidden !important;
min-width: 0 !important;
}
/* Expand first unpinned tab */
#tabbrowser-tabs:not([haspinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
max-width: 100vw !important;
}
/* Expand unpinned active tab */
.tabbrowser-tab:not([pinned])[selected] {
min-width: calc(100vw - 120px) !important;
}
/* Shorten tab content width so that tab number is more visible */
.tabbrowser-tab[selected]:not(:hover,[pinned]) > .tab-stack > .tab-content {
width: calc(100vw - 150px) !important;
}
}
Can a moderator please re-enable my ability to edit my original post? @dcz?
1 Like
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:
- in hex-code
#12c5da or - 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!
@user0, 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:
-
Enable javascript or use Web Developer Tools to unhide the forms for creating an account.
-
Fill out forms (email address is required).
-
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.
-
Click link in email or copy into new tab.
-
Click button:
Yes, I'm sure -
Captcha-blocked:
Error: A captcha challenge is required to complete the request.
- 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