Siklos/edge-frfox
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add styling to the side bar and library window #83

Browse source
This commit is contained in:
bmFtZQ 2023-11-24 20:04:20 +08:00
parent 15d5c8219a
commit 81d322dc93
6 changed files with 161 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

87
chrome/global/tree.css Normal file
View file

@ -0,0 +1,87 @@
/* Edge-Frfox - tree.css */
/* Change height of tree items and add rounded corners */
treechildren::-moz-tree-row,
treecol:not([hideheader="true"]),
.tree-columnpicker-button {
min-height: max(28px, 1.3em) !important;
border-radius: 2px !important;
}
/* Change the background colour on hover */
@media not (prefers-contrast) {
treechildren::-moz-tree-row(hover) {
background-color: var(--toolbarbutton-hover-background) !important;
}
}
/* Change the background colour when pressed */
treechildren::-moz-tree-row(selected) {
background-color: var(--toolbarbutton-active-background) !important;
}
/* Change the background colour when focused */
treechildren::-moz-tree-row(selected, focus) {
background-color: var(--button-primary-bgcolor) !important;
}
treechildren::-moz-tree-row(current, focus) {
outline: var(--default-focusring);
outline-color: var(--button-primary-bgcolor) !important;
outline-offset: calc(-1 * var(--default-focusring-width));
}
treechildren::-moz-tree-image(selected),
treechildren::-moz-tree-twisty(selected),
treechildren::-moz-tree-cell-text(selected) {
color: inherit !important;
}
treechildren::-moz-tree-image(selected, focus),
treechildren::-moz-tree-twisty(selected, focus),
treechildren::-moz-tree-cell-text(selected, focus) {
color: var(--button-primary-color) !important;
}
/* Spacing between icon and label */
treechildren::-moz-tree-image {
margin-inline-end: 8px !important;
}
/* Separator appearance */
treechildren::-moz-tree-separator {
border-top: 1px solid var(--toolbarseparator-color) !important;
border-bottom: none !important;
}
/* Change the colour of the drop feedback elements */
treechildren::-moz-tree-cell-text(primary, dropOn) {
background-color: var(--button-primary-bgcolor) !important;
color: var(--button-primary-color) !important;
}
treechildren::-moz-tree-drop-feedback {
background-color: var(--toolbarbutton-icon-fill-attention) !important;
border-radius: 2px !important;
}
/* Change the appearance for the expandable items */
treechildren::-moz-tree-twisty {
padding-top: 0 !important;
padding-inline: 4px !important;
width: 16px !important;
list-style-image: url("../icons/arrow-filled-right.svg") !important;
}
treechildren:-moz-locale-dir(rtl)::-moz-tree-twisty(closed) {
list-style-image: url("../icons/arrow-filled-left.svg") !important;
}
treechildren::-moz-tree-twisty(open) {
list-style-image: url("../icons/arrow-filled-down.svg") !important;
}
/* Change the identation of child items */
treechildren::-moz-tree-indentation {
width: 16px !important;
}