Make proton-like context menus look a bit nicer with compact density.
This patch also adds a few more color variables to optional settings
This commit is contained in:
parent
036af1d3a0
commit
d4b5627473
1 changed files with 15 additions and 2 deletions
|
@ -11,14 +11,22 @@ See the above repository for updates as well as full license text. */
|
||||||
--panel-separator-margin-vertical: 4px;
|
--panel-separator-margin-vertical: 4px;
|
||||||
--button-hover-bgcolor: rgb(82, 82, 94);
|
--button-hover-bgcolor: rgb(82, 82, 94);
|
||||||
}
|
}
|
||||||
|
:root[uidensity="compact"] menupopup:not(.in-menulist){
|
||||||
|
--panel-padding: 4px 0 !important;
|
||||||
|
--arrowpanel-menuitem-padding-block: 8px;
|
||||||
|
}
|
||||||
/* OPTIONAL Set custom context menu colors below */
|
/* OPTIONAL Set custom context menu colors below */
|
||||||
/*
|
/*
|
||||||
menupopup:not(.in-menulist){
|
menupopup:not(.in-menulist){
|
||||||
--panel-background: #eb2a33 !important;
|
--panel-background: #eb2a33 !important;
|
||||||
--panel-color: #4aa !important;
|
--panel-color: #4aa !important;
|
||||||
|
--panel-separator-color: #f00 !important;
|
||||||
|
--panel-border-color: ThreeDShadow !important;
|
||||||
|
}
|
||||||
|
menupopup > menuseparator{
|
||||||
|
border-color: var(--panel-separator-color,ThreeDShadow) !important;
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
menupopup{
|
menupopup{
|
||||||
--panel-item-hover-bgcolor: var(--button-hover-bgcolor);
|
--panel-item-hover-bgcolor: var(--button-hover-bgcolor);
|
||||||
--panel-border-radius: var(--arrowpanel-border-radius) !important;
|
--panel-border-radius: var(--arrowpanel-border-radius) !important;
|
||||||
|
@ -41,6 +49,10 @@ menupopup > menu{
|
||||||
menupopup:not(.in-menulist){
|
menupopup:not(.in-menulist){
|
||||||
--panel-padding: var(--arrowpanel-menuitem-padding-block) 0 !important;
|
--panel-padding: var(--arrowpanel-menuitem-padding-block) 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:root[uidensity="compact"] #context-navigation{
|
||||||
|
padding-block: 0 !important;
|
||||||
|
}
|
||||||
menuseparator:not(.in-menulist){
|
menuseparator:not(.in-menulist){
|
||||||
margin-block: var(--panel-separator-margin-vertical) !important;
|
margin-block: var(--panel-separator-margin-vertical) !important;
|
||||||
}
|
}
|
||||||
|
@ -48,10 +60,11 @@ menuseparator:not(.in-menulist){
|
||||||
#context-navigation > menuitem[_moz-menuactive] .menu-iconic-icon{
|
#context-navigation > menuitem[_moz-menuactive] .menu-iconic-icon{
|
||||||
border-radius: var(--arrowpanel-menuitem-border-radius) !important;
|
border-radius: var(--arrowpanel-menuitem-border-radius) !important;
|
||||||
}
|
}
|
||||||
#context-navigation > menuitem[_moz-menuactive] .menu-iconic-icon,
|
#context-navigation > menuitem[_moz-menuactive]:not([disabled]) .menu-iconic-icon,
|
||||||
menupopup > menuitem[_moz-menuactive],
|
menupopup > menuitem[_moz-menuactive],
|
||||||
menupopup > menu[_moz-menuactive]{
|
menupopup > menu[_moz-menuactive]{
|
||||||
background-color: var(--panel-item-hover-bgcolor) !important;
|
background-color: var(--panel-item-hover-bgcolor) !important;
|
||||||
|
color: var(--panel-color,inherit) !important;
|
||||||
}
|
}
|
||||||
menupopup > menuitem[disabled][_moz-menuactive],
|
menupopup > menuitem[disabled][_moz-menuactive],
|
||||||
menupopup > menu[disabled][_moz-menuactive]{
|
menupopup > menu[disabled][_moz-menuactive]{
|
||||||
|
|
Loading…
Reference in a new issue