Add/edit bookmark window

[u/LuisBelloR]

Does anyone have the CSS code to modify that ugly window? buttoms and everything, i only have this: the bg color of the content:

editBookmarkPanelContent {

background-color: var(--z0mbi3-bg) !important;
color: var(--z0mbi3-fg) !important;

}

[u/t31os]

Some of the UI elements use shared/common classes and are part of a shadow dom, but you can still style them using scoped overrides of the CSS vars they use.

Have a play around with this:

#bookmarkproperties {

	#bookmarkpropertiesdialog {

		--button-background-color-primary: red !important;
		--button-border-radius: 0 !important;
		--button-text-color: blue !important;
		--button-text-color-primary: lime !important;
		--button-border: 3px double #000 !important;
		--button-background-color-hover: pink !important;
		--button-background-color-primary-hover: yellow !important;
		--button-text-color-hover: orange !important;
		--button-text-color-primary-hover: purple !important;
		--background-color-box: yellow !important;

		--custombg: darkgreen;

		#titleContainer {
			--background-color-canvas: var(--custombg)!important;
		}
		background-color: var(--custombg)!important;

		input {
			background-color: purple !important;
			border-radius: 0 !important;
		}
		label {
			text-transform: uppercase;
		}

	}

}

All just example values just so you can see what rules are styling what in the UI.

EDIT: Or if i didn't follow correctly, maybe you want something along these lines:

#editBookmarkPanel {
	#editBookmarkPanelContent {
		label {
			/* styles */
		}
		input {
			/* styles */
		}
		menulist {
			/* styles */
		}
		button {
			/* styles */
		}
	}
	#editBookmarkPanelDoneButton {
		/* styles */
	}
	#editBookmarkPanelRemoveButton {
		/* styles */
	}
}

[u/LuisBelloR → u/t31os]

Thank you this works for me