Support custom style sheet

Feature Requests Password Manager
1

A huge request to the developers: provide an address field for custom_style.css This address must be saved in the settings. This means that BITWARDEN will be updated without deleting custom_style.css.

But it’s even better – to the database with logins :slight_smile:

Something like this is done in Vivaldi. How it fits with Chromium

2

BITWARDEN - Your Style

The whole BITWARDEN is a mini-website.

...\Opera\profile\data\Default\Extensions\ccnckbpmaceehanjmeomladnmlffdjgn\2025.2.0_0\popup\main.css

Add to the END

Summary

/* ============= Your CSS ============== */

bit-item { 
       transition: transform 10s cubic-bezier(0.5, -0.8, 0.5, 1.5); 
     &:hover { 
       border: 2px solid red; 
       transform: perspective(300px) rotateX(360deg) rotateY(10deg) scale(1.2); 
       transition: transform 1s; } }

/* ============= /Your CSS ============== */

You can add something. Or delete it.

(Opera, and any Chromium)

If you need more, feel the breadth of BW’s capabilities – use

@keyframes ... {}
and 
animation: ...
3

@serega_da, I moved this into feature requests so that it can gather votes and hopefully the attention of the developers.

1 Like
4

Rather, it is not precisely this implementation that is important here.
But the ability to style the previous and subsequent elements. You can set the rest as you like.
You may to mod simple this code for styling +/-2 elements regarding :hover

Your CSS 
/* ============= Your CSS ============== */

:root {
	--cubic: ease-out ; /* cubic-bezier(0.5, -0.0, 0.5, 1.0) */
	--col: red;
	--bord1: 1px solid var(--col);
	--bord2: 2px solid var(--col);
	--transf: perspective(300px) rotateY(10deg) translateX(7%) translateZ(3vw) scale(0.95, 1.1);
	--trans-in: 0.5s var(--cubic);
	--trans-out: 1s var(--cubic);
	}

/* ========== Folder, Type ========== */

bit-chip-select {
	transform-origin: center top;
	transition: var(--trans-out);
  &:hover {
	transform: perspective(300px) rotateX(20deg) scale(1.1);
	transition: var(--trans-in); 
	.tw-border  { border: var(--bord2); } }
}

/* ========== List ========== */

[id^="cdk-overlay-"] {
	transform-origin: center top;
	transition: var(--trans-out);
  &:hover {
	transform: perspective(300px) rotateX(5deg) scale(1.05);
	transition: var(--trans-in); 
	.tw-border  { border: var(--bord2) ;} }
}


/* ========== Login ========== */

bit-item {
	transition: var(--trans-out);

  &:hover {
	border: var(--bord2); 
	transform: perspective(300px) rotateY(20deg) translateX(10%) translateZ(4vw) scale(0.95, 1.2); 
    transition: var(--trans-in);
	.tw-border  { border: var(--bord2) ;}
   & + * {
		border: var(--bord1);
		transform: var(--transf) translateY(3%) rotateX(-20deg);
		transition: var(--trans-in);	}
   }
   &:has(+ &:hover) {
		border: var(--bord1);
		transform: var(--transf) translateY(-3%) rotateX(20deg);
		transition: var(--trans-in); 	}
}


/* ============= /Your CSS ============== */
5
  1. Here I use a simple one: Border: 2px. Its width is initially 0. The border is adjusted by TailWind.
    I can’t redefine it right away.
    The outer border increases the TailWind border, and causes each element to be offset by the thickness of the border – it is incorrect.

But here the theme is not for accurate reproduction, but for possibilities.

  1. Immediately after creating this theme, 3 days later, Opera disabled the ability to edit CSS properties. And the entire code as a whole.
    Not 3 years later, not 3 years before the creation of this theme. .But after 3 days.

You can guess for yourself “where the legs grow from.” What “legs” ? More precisely, whose “ears are sticking out”

In other words, you won’t see this beauty in the Opera. You won’t be able to apply your knowledge.

I understand that BW’s whole concern is in the danger of editing JS. That is, you can edit your JS on your computer and steal your own passwords.

But that doesn’t justify disabling CSS editing. And as the name of this topic suggests, there are ways to both ensure the integrity of BW and leave children’s entertainment modding to their users.

6

in variant 1 you can delete “transform” from the 1st and last line.
This is set the transition time for all properties. You can add your own properties.