Variable Spreadsheet

Reference tables of all custom variables used throughout the theme, with brief description of what the variable effects.

• Color Variables
• Positioning Variables

✅ Can be modified
⚠️ Can be modified with limitations and comprehension
❌ Do not modify unless you know what you are doing

chrome/theme/all-global-theme-xxx.css

ℹ️ The all-global-theme files are all iterations of the same theming, but with different color schemes. all-global-theme-fullmoon is the default dark mode for FF-Ultima; While all-global-theme-dusky is the default light mode. Each file contains similar, if not, identical structure.

Variable	Line	Customizable?	Function
--uc-ultima-window	18--	✅	The main window (browser) background color
--uc-dark-color		⚠️	used as a global black
--uc-light-color		⚠️	used as a global white
--uc-text		✅	text color for menus, panels, tabs, adaptive to dark/light mode
--uc-accent-i		✅	an accent color (blues, yellows, greens, etc, different between color schemes)
--uc-accent-ii		✅	an accent color (blues, yellows, greens, etc.)
--uc-accent-iii		✅	an accent color (blues, yellows, greens, etc.)
--uc-accent-iv		✅	a darker rgb accent color
--uc-background-main		⚠️	the background color for main ui elements (tabs,sidebar)
--uc-background-panel		✅	background color used for panels/menus
--uc-background-solid		✅	similar color to the backgrounds above, used for assets that need a solid opacity
--uc-background-secondary		✅	similar color to above, used to layer backgrounds on top of each other (when needed)
--uc-transparent		❌	transparent color, vital for assets that that don't need visibility
--uc-selected		✅	the background color for hovered buttons
--uc-active		✅	the background color for active buttons
--uc-panel-border		✅	Context menus, popup panels border color
--uc-panel-border-ii		✅	Context menus, popup panels border color
--uc-context-menu		⚠️	Context menu background color
--uc-tabs-background		✅	Tabs background color (often utilizes uc-background-main)
--uc-sb-background		✅	Sidebar body background (often utilizes uc-background-main)
--uc-sb-background-header		✅	Sidebar header background (utilizes uc-background-main)
--uc-sb-background-container		⚠️	Used for the sidebar container, allows dynamic changes to the backgrounds above, and color mixing
--uc-tabs-lwt		✅	The color of the tabs panel background when a theme is in use, usually a lightly transparent color hue
--uc-sb-lwt		✅	The color of the sidebar background when a theme is in use, "^"
--uc-background-panel	--51	✅	Background color for popup-menus,popup-panels, extensions panel, etc

chrome/theme/all-global-positioning.css

Variable	Line	Customizable?	Function
--uc-vertical-tabs-width	8-28	⚠️	Controls the width of the tabs panel for the users prefered size option. XS (41px - icon only view) is the smallest option. Be cautious going any lower than 41px. Then there is S, then L (250px) the default option
--uc-vertical-tabs-width-revert	8-28	⚠️	This variable is used to match the widths of the tabs panel set above, always keep it parallel to the user preference it is paired with
--uc-navbar-height	33	⚠️	This variable DOES NOT alter the nav bar. However, it is used to calculate height adjustments for the tabs panel, based on the nav bars default height
--uc-collapsed-tabs-width	34	⚠️	The width of the tabs panel when collapsed. This is used for the autohide feature, full screen mode, and when the screen width falls below 800-850px. Be cautious when going below 41px
--uc-bookbar-height	44	✅	Change the height of the bookmarks toolbar
--uc-tabbar-height		❌	Tab panel height, calculated with other variables
--uc-tabbar-height-adjust		❌	Tab panel height, after calculated adjustments (like bookmarks toolbar being collapsed or not)
--uc-all-border-radius	53	✅	The rounded border/corners you see touching everything. There's an option in about:config called ultima.xstyle.squared try setting it to true and see the difference before making changes to this in-file.
--tab-border-radius	54	✅	Rounded corners on the tabs panel
--uc-button-border	55	✅	Increased rounding on all buttons
--uc-all-margins	59	✅	Margins/Spacing between (tabs panel <> browser content <> sidebar)
--uc-margin-inline	60	⚠️	Margins/Spacing used to keep certain elements in sync, this number should match the margin of --uc-all-margins above
--uc-margin-top	61	⚠️	Margins/Spacing used to keep certain elements in sync, this number should match the "top margin" for --uc-all-margins above
--uc-margin-bottom	62	✅	Margins/Spacing used to keep certain elements in sync, this number should match the "bottom margin" for --uc-all-margins above
--uc-tab-margins	63	⚠️	Margins/Spacing used for the tabs panel, it usually shares the exact same values as --uc-all-marginsabove but for the sake of customization, users can give it its own custom margins/spacing
--uc-sb-margin-leftside	64	⚠️	Sidebery has its own margins/spacing as well, however it needs to be specified for which side of the screen it is on
--uc-sb-margin-rightside	65	⚠️	Sidebar margins/spacing when on the right side of the screen
--uc-tab-padding	66	✅	Self explanatory, padding for an individual tab
--tab-min-height	69	✅	Individial tab height
--tab-min-width		❌	a tabs min width (caution)
--tab-overflow-pinned-tabs-width		❌	pinned tabs min width (caution)
--inline-tab-padding	72	✅	Individial tab padding <>
--tab-block-margin	73	✅	Spacing between individual tabs
place	##	✅	holder
place	##	✅	holder