uotp/popup.css

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: hsl(213, 10%, 17%);
		--light-bg-color: hsl(213, 10%, 23%);
		--highlight-bg-color: hsl(213, 10%, 28%);
		--fg-color: #ccc;
		--border-color: #888;
		--error-bg-color: hsl(0, 38%, 30%);
		--img-filter: ;
	}
}

@media (prefers-color-scheme: light) {
	:root {
		--bg-color: #eee;
		--light-bg-color: #ddd;
		--highlight-bg-color: #ccc;
		--fg-color: #666;
		--border-color: #888;
		--error-bg-color: hsl(0, 38%, 70%);
		--img-filter: invert(1);
	}
}

*
{
	box-sizing: border-box;
}

body {
	background-color: var(--bg-color);
	color: var(--fg-color);
	max-height: 600px;
	margin: 0;
	font-size: 12px;
	position: relative;
}

input {
	background-color: var(--bg-color);
	color: var(--fg-color);
	border: 1px solid var(--border-color);
	margin: 4px;
	padding: 2px 4px;
	border-radius: 5px;
}

button {
	background-color: var(--light-bg-color);
	color: var(--fg-color);
	border: 1px solid var(--border-color);
	margin: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	border-radius: 5px;
}

h2 {
	font-size: 1.2em;
	margin: 0 0 8px 0;
}

.entry {
	font-size: 1.2em;
	padding: 1em;
}

.entry .header {
	display: flex;
}

.entry .header h2,
.entry .header input {
	flex-grow: 1;
}

.entry .action {
	margin-left: 8px;
}

.entry .action img {
	filter: var(--img-filter);
	height: 1em;
	cursor: pointer;
}

.entry .otp-container {
	display: flex;
	align-items: center;
}

.entry .otp {
	background-color: var(--light-bg-color);
	padding: 4px 8px;
	border-radius: 5px;
	cursor: pointer;
	flex-grow: 1;
	margin-right: 8px;
}

.entry .otp:hover {
	background-color: var(--highlight-bg-color);
}

.entry svg {
	width: 1.5em;
	height: 1.5em;
	transform: rotateY(-180deg) rotateZ(-90deg);
	border-radius: 50%;
}

.entry svg circle {
	stroke-dasharray: 6.28318px;
	stroke-dashoffset: 0;
	stroke-width: 100%;
	stroke: var(--border-color);
	fill: none;
	animation: timer1 30s linear 1 forwards;
}

#entry-list .entry {
	border-top: 1px solid var(--border-color);
}

#entry-list .entry input {
	font-size: 1.2em;
	width: 200px;
}

.hidden {
	display: none !important;
}

.icon {
	filter: var(--img-filter);
	height: 1em;
}

.password-container {
	display: flex;
	align-items: center;
	position: relative;
}

.password-container input {
	flex-grow: 1;
}

.visibility {
	position: absolute;
	right: 10px;
}

#action {
	display: flex;
	justify-content: center;
}

#action > div {
	display: flex;
	justify-content: center;
}

#action img {
	height: 2em;
	cursor: pointer;
}

#entry-add-container {
	position: relative;
	padding-bottom: 4px;
}

#entry-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#entry-form > div {
	display: flex;
}

#entry-form label {
	flex-grow: 1;
	margin-right: 4px;
}

#logout {
	position: absolute;
	top: 4px;
	right: 4px;
	cursor: pointer;
}

#notification {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background-color: var(--error-bg-color);
	padding: 4px;
	transform: translateY(-100%);
	transition: transform 0.3s;
}

#notification.show {
	transform: translateY(0);
}

#notification img {
	height: 1em;
	cursor: pointer;
}

#notification-text {
	white-space: pre-wrap;
}

#password-container {
	padding: 1em;
}

#password-form {
	display: flex;
	align-items: center;
}

#password-form label {
	margin-right: 8px;
}

@keyframes timer0 {
	from {
		stroke-dashoffset: 0;
	}
	to {
		stroke-dashoffset: 6.28318px;
	}
 }

 @keyframes timer1 {
	from {
		stroke-dashoffset: 0;
	}
	to {
		stroke-dashoffset: 6.28318px;
	}
 }