I spent some time looking at lots of stuff pertaining to this and ended
up with the settings I currently use in my gtk.css file, attached. Have
a look and see if you can use any of my "tricks".
/*
* Author: Kenneth J. Farley
* Date: 2021-12-11
*
* GTK3 CSS file for use with GnuCash.
* Developed by looking at complete theme definitions,
* and scouring the internet for documentation.
*/
/* --- [ Variable Definitions ] ------------------------
*
* Definitions of colors so they can be used in many
* places and subsequently changed conveniently, rather than
* trying to find all uses of a particular color, etc.
*/
@define-color hueClear rgba( 0, 0, 0, 0.00 ) ;
@define-color hueBGButton rgba( 240, 240, 240, 1.00 ) ;
@define-color hueBGDropdown rgba( 250, 235, 215, 1.00 ) ;
@define-color hueBGMain rgba( 220, 220, 220, 1.00 ) ;
@define-color hueBGNormal rgba( 220, 220, 220, 1.00 ) ;
@define-color hueBGScroll rgba( 250, 250, 250, 0.40 ) ;
@define-color hueBGSlider rgba( 72, 61, 139, 1.00 ) ;
@define-color hueBGTooltip rgba( 0, 0, 0, 0.80 ) ;
@define-color hueBGTrough rgba( 150, 150, 150, 0.80 ) ;
@define-color hueBGSelected rgba( 0, 128, 128, 1.00 ) ;
/*
* Hover Custom Orange = 255, 136, 77
* Chartreuse = 127, 255, 0
* Carolina Blue = 87, 160, 211
* Neon Green = 57, 255, 20
*/
@define-color hueHover rgba( 255, 136, 77, 1.00 ) ;
@define-color hueHoverLo rgba( 255, 136, 77, 0.10 ) ;
@define-color hueHoverMd rgba( 255, 136, 77, 0.20 ) ;
@define-color hueHoverHi rgba( 255, 136, 77, 0.50 ) ;
@define-color hueHoverBorder rgba( 255, 136, 77, 1.00 ) ;
/*
* Tabs
*/
@define-color hueTabHover rgba( 26, 140, 255, 1.00 ) ;
@define-color hueTabHoverLo rgba( 26, 140, 255, 0.10 ) ;
@define-color hueTabHoverMd rgba( 26, 140, 255, 0.20 ) ;
@define-color hueTabHoverHi rgba( 26, 140, 255, 0.50 ) ;
@define-color hueTabHoverBorder rgba( 26, 140, 255, 1.00 ) ;
/*
* Shade LightCyan = 224, 255, 255
* LightSteelBlue = 176, 196, 222
* LightYellow = 255, 255, 214
*/
@define-color hueShadedLo rgba( 176, 196, 222, 0.05 ) ;
@define-color hueShadedMd rgba( 176, 196, 222, 0.20 ) ;
@define-color hueShadedHi rgba( 176, 196, 222, 0.50 ) ;
/*
* Hilite White = 255, 255, 255
*/
@define-color hueHiliteLo rgba( 255, 255, 255, 0.10 ) ;
@define-color hueHiliteMd rgba( 255, 255, 255, 0.25 ) ;
@define-color hueHiliteHi rgba( 255, 255, 255, 0.50 ) ;
@define-color hueBorderNormal lightsteelblue ;
@define-color hueProgress rgba( 0, 102, 102, 1.00 ) ;
@define-color hueRegCursor rgba( 230, 195, 0, 1.00 ) ;
@define-color hueRegDark lightsteelblue ;
@define-color hueRegHeader darkslateblue ;
@define-color hueRegLight lemonchiffon ;
@define-color hueTextNormal black ;
@define-color hueTextInverted white ;
/*
* --- [ Overall Appearance ] --------------------------
*
* Settings that will affect all occurrences of the
* indicated components, unless they are overriden later.
*/
*
{
font-family: "Lucida Grande", sans-serif ;
font-size: 11pt ;
}
button
{
background-color: @hueBGButton ;
background-image: linear-gradient(@hueShadedLo,@hueShadedMd,@hueShadedHi) ;
border-radius: 6px ;
border-style: solid ;
border-color: @hueBGNormal ;
border-width: 1px ;
}
button:hover
{
background-color: @hueBGButton ;
background-image: linear-gradient(@hueHoverLo,@hueHoverMd,@hueHoverHi) ;
border-style: solid ;
border-color: @hueHoverBorder ;
border-width: 1px ;
}
/*
* --- [ Status Bar ] ----------------------------------
*
* The bar at the bottom of the frame window that gives
* a brief bit of info like the file name, and also holds
* the progress bar that shows status of a read or save.
*/
statusbar label
{
font-size: 11pt ;
font-weight: bold ;
color: @hueTextNormal ;
}
progressbar
{
background-color: @hueClear ;
font-size: 10pt ;
margin: 0px 2px 2px 0px ;
}
progressbar.horizontal trough,
levelbar.horizontal trough,
progressbar.horizontal progress
{
min-height: 10px ;
border-radius: 5px ;
}
progressbar progress
{
background-color: @hueProgress ;
background-image: linear-gradient(@hueHiliteLo,@hueHiliteMd,@hueHiliteHi) ;
height: auto ;
border-style: none ;
}
/*
* --- [ Main Window Bottom Bar ] ----------------------
*
* The small bar at the bottom of the application that
* is visible for all operations.
*/
.GncMainWindow
{
background-color: @hueBGMain ;
}
/*
* --- [ Summary Bar ] ---------------------------------
*
* The "button" at the bottom of the Accounts page that
* shows the total worth, profit, etc.
*/
.GncAccountPage
{
background-color: @hueBGMain ;
}
.summary-bar
{
background-color: @hueClear ;
}
.summary-bar cellview
{
background-color: @hueClear ;
color: @hueTextNormal ;
}
.combo
{
background-color: @hueBGButton ;
background-image: linear-gradient(@hueShadedLo,@hueShadedMd,@hueShadedHi) ;
color: @hueTextNormal ;
font-size: 16pt ;
font-weight: bold ;
}
/*
* --- [ Notebook ] ------------------------------------
*
* The Notebook is the GUI structure Gnucash uses to show
* the list of accounts, account registers, etc. It is a
* simulation of a tabbed set of files. The settings here
* will format those tabs, giving them similar behavior
* as that for buttons (highlighting mouse hover, etc.)
*/
.GncMainWindow notebook box > image
{
margin-left: -2em ;
margin-right: -2em ;
padding: 0px ;
opacity: 0 ;
}
tabs, tab
{
margin: 2px ;
padding: 2px ;
}
tabs label
{
margin: 2px ;
}
notebook > header
{
background-color: @hueBGMain ;
border-color: @hueBGMain ;
}
notebook tab
{
background-color: @hueBGButton ;
background-image: linear-gradient(@hueShadedLo,@hueShadedMd,@hueShadedHi) ;
min-height: 32px ;
margin: 1px 1px 0px 0px;
padding: 0px ;
border-style: solid ;
border-color: @hueBGNormal ;
border-width: 1px 1px 0px 1px ;
border-radius: 6px 6px 0px 0px ;
}
notebook tab:hover
{
background-image: linear-gradient(@hueTabHoverLo,@hueTabHoverMd,@hueTabHoverHi) ;
border-color: @hueTabHoverBorder ;
}
notebook tab:checked
{
border-color: @hueTabHoverBorder ;
}
notebook > header.left tabs tab
{
margin: 0px ;
padding: 0px ;
border-style: solid ;
border-color: @hueBGNormal ;
border-width: 1px 0px 1px 1px ;
border-radius: 6px 0px 0px 6px ;
}
notebook > header.left tabs tab:hover
{
border-color: @hueTabHover ;
}
notebook >header.left tabs tab:checked
{
border-color: @hueTabHoverBorder ;
}
notebook tab box
{
padding: 0px ;
margin: 0px ;
background-color: @hueClear ;
border-width: 0px ;
}
notebook > header tab button:hover,
notebook > header tab button:hover:checked
{
background-image: linear-gradient(@hueTabHoverLo,@hueTabHoverMd,@hueTabHoverHi) ;
border-color: @hueTabHoverBorder ;
}
/*
* --- [ Scroll Bars ] ---------------------------------
*
* The scroll bars that show up on data presentations that
* are too big for the current window.
*/
scrollbar
{
background-image: none ;
border-style: solid ;
background-color: @hueBGScroll ;
}
scrollbar trough
{
border-style: none ;
border-width: 0px ;
background-color: @hueBGTrough ;
}
scrollbar.vertical trough
{
background-image: linear-gradient(to right,@hueHiliteLo,@hueHiliteMd,@hueHiliteHi) ;
}
scrollbar slider
{
background-color: @hueBGSlider ;
}
/*
* --- [ Account Tree ] --------------------------------
*
* The list of accounts, usually the first window tab
* in the program.
*/
#account_tree
{
letter-spacing: 0px ;
background-color: lavender ;
color: @hueTextNormal ;
}
.GncAccountPage box
{
background-color: @hueClear ;
}
.GncAccountPage label
{
font-weight: bold ;
background-color: @hueClear ;
color: @hueTextInverted ;
}
#account_tree:selected
{
background-color: @hueBGSelected ;
color: @hueTextInverted ;
font-weight: bold ;
}
treeview button
{
background-color: @hueBGNormal ;
color: @hueTextNormal ;
}
#account_tree header button
{
background-color: @hueRegHeader ;
background-image: linear-gradient(@hueShadedLo,@hueShadedMd,@hueShadedHi) ;
color: @hueTextInverted ;
border-radius: 0px ;
border-style: solid ;
border-color: @hueBGNormal ;
border-width: 0px 1px 0px 0px ;
}
#account_tree header button:hover
{
background-image: linear-gradient(@hueHiliteLo,@hueHiliteMd,@hueHiliteHi) ;
}
/*
* --- [ Toolbar Settings ] ----------------------------
*
* These settings change the appearance of the toolbar
* and its buttons.
*/
toolbar
{
background-color: @hueBGMain ;
}
toolbar toolbutton button
{
background-color: @hueBGButton ;
background-image: linear-gradient(@hueShadedLo,@hueShadedMd,@hueShadedHi) ;
padding-left: 2px ;
padding-right: 2px ;
border-color: @hueBorderNormal ;
min-width: 64px ;
}
toolbar toolbutton button:hover
{
background-color: @hueBGButton ;
background-image: linear-gradient(@hueHoverLo,@hueHoverMd,@hueHoverHi) ;
border-color: @hueHoverBorder ;
}
toolbar toolbutton label
{
font-size: 11pt ;
padding-left: 2px ;
padding-right: 2px ;
}
/*
* --- [ Register Settings ] ---------------------------
*
* Set the alternating colors for the lines of an account
* register, the cursor (line being edited), the split
* lines, etc.
*/
.GncRegisterPage
{
background-color: @hueBGMain ;
}
.GncRegisterPage label
{
font-family: "CopperPlate", sans-serif ;
font-size: 12pt ;
background-color: @hueClear ;
color: @hueTextNormal ;
margin: 2px ;
}
*.gnc-class-register-header
{
background-color: @hueRegHeader ;
color: @hueTextInverted ;
}
*.gnc-class-register-primary
{
background-color: @hueRegLight ;
color: @hueTextNormal ;
}
*.gnc-class-register-primary:disabled
{
background-color: mix (@hueRegLight, grey, 0.2) ;
color: mix (@hueTextNormal, grey, 0.2) ;
}
*.gnc-class-register-secondary
{
background-color: @hueRegDark ;
color: @hueTextNormal ;
}
*.gnc-class-register-secondary:disabled
{
background-color: mix (@hueRegDark, grey, 0.2) ;
color: mix (@hueTextNormal, grey, 0.2) ;
}
*.gnc-class-register-split
{
background-color: @hueBGDropdown ;
color: @hueTextNormal ;
}
*.gnc-class-register-split:disabled
{
background-color: mix (@hueBGDropdown, grey, 0.2) ;
color: mix (@hueTextNormal, grey, 0.2) ;
}
*.gnc-class-register-cursor
{
background-color: @hueRegCursor ;
color: @hueTextNormal ;
}
*.gnc-class-register-cursor:disabled
{
background-color: mix (@hueRegCursor, grey, 0.2) ;
color: mix (@hueTextNormal, grey, 0.2) ;
}
gnc-id-cursor entry
{
margin: 2px 5px 2px 5px ;
background-color: @hueRegCursor ;
color: @hueTextNormal ;
}
gnc-id-cursor button
{
margin: 1px 1px 1px 1px ;
}
/*
* --- [ Tooltips ] ------------------------------------
*
* These are the small popups that give a brief line of text
* explaining the function of a button, etc.
*/
tooltip.background
{
background-color: @hueClear ;
}
tooltip box
{
background-color: @hueBGTooltip ;
color: @hueTextInverted ;
border-radius: 4px ;
padding: 0px 0px 0px 0px ;
}
/*
* --- [ Calendar ] ------------------------------------
*
* Apparently someone thought the calendar was important,
* since they provided a lot of means of altering its
* appearance.
*/
sheet calendar
{
font-family: "Arial", sans-serif ;
font-size: 10pt ;
}
calendar
{
border-color: @hueHoverBorder
}
calendar.header
{
background-color: @hueBGNormal ;
border-radius: 2px ;
border-width: 1px ;
border-color: @hueBGNormal ;
background-image: linear-gradient(@hueShadedLo,@hueShadedMd,@hueShadedHi) ;
color: @hueTextNormal ;
}
calendar.highlight
{
background-color: @hueBGSelected ;
color: @hueTextInverted ;
border-radius: 0px ;
padding: 0px ;
}
calendar.view
{
background-color: @hueRegDark ;
background-image: linear-gradient(to right,@hueHiliteLo,@hueHiliteHi) ;
color: @hueTextNormal ;
}
#dens-cal-popup treeview
{
background-color: @hueBGDropdown ;
}
calendar.button
{
background-color: @hueBGButton ;
background-image: linear-gradient(@hueShadedLo,@hueShadedMd,@hueShadedHi) ;
border-radius: 2px ;
border-style: solid ;
border-color: @hueBGNormal ;
border-width: 1px ;
}
calendar.button:hover
{
background-color: @hueBGButton ;
background-image: linear-gradient(@hueHoverLo,@hueHoverMd,@hueHoverHi) ;
border-style: solid ;
border-width: 1px ;
border-color: @hueHoverBorder ;
}
calendar*:selected,
calendar*:selected:focus
{
background-color: @hueBGSelected ;
color: @hueTextInverted ;
border-radius: 2px ;
}
_______________________________________________
gnucash-user mailing list
[email protected]
To update your subscription preferences or to unsubscribe:
https://lists.gnucash.org/mailman/listinfo/gnucash-user
-----
Please remember to CC this list on all your replies.
You can do this by using Reply-To-List or Reply-All.
