mirror of
				https://codeberg.org/yeentown/barkey.git
				synced 2025-11-04 07:24:13 +00:00 
			
		
		
		
	fix: performance issues & respect blur option
This commit is contained in:
		
							parent
							
								
									363092d537
								
							
						
					
					
						commit
						d6ebbf5721
					
				
					 4 changed files with 2 additions and 8 deletions
				
			
		| 
						 | 
					@ -139,7 +139,6 @@ onUnmounted(() => {
 | 
				
			||||||
	overflow: clip;
 | 
						overflow: clip;
 | 
				
			||||||
	contain: content;
 | 
						contain: content;
 | 
				
			||||||
	background: color-mix(in srgb, var(--panel) 65%, transparent);
 | 
						background: color-mix(in srgb, var(--panel) 65%, transparent);
 | 
				
			||||||
	backdrop-filter: blur(16px);
 | 
					 | 
				
			||||||
	&.naked {
 | 
						&.naked {
 | 
				
			||||||
		background: transparent !important;
 | 
							background: transparent !important;
 | 
				
			||||||
		box-shadow: none !important;
 | 
							box-shadow: none !important;
 | 
				
			||||||
| 
						 | 
					@ -173,7 +172,6 @@ onUnmounted(() => {
 | 
				
			||||||
	z-index: 2;
 | 
						z-index: 2;
 | 
				
			||||||
	line-height: 1.4em;
 | 
						line-height: 1.4em;
 | 
				
			||||||
	background: color-mix(in srgb, var(--panelHeaderBg) 35%, transparent);
 | 
						background: color-mix(in srgb, var(--panelHeaderBg) 35%, transparent);
 | 
				
			||||||
	backdrop-filter: blur(16px);
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.title {
 | 
					.title {
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -57,7 +57,6 @@ defineExpose({
 | 
				
			||||||
	&.noGap {
 | 
						&.noGap {
 | 
				
			||||||
		> .notes {
 | 
							> .notes {
 | 
				
			||||||
			background: color-mix(in srgb, var(--panel) 65%, transparent);
 | 
								background: color-mix(in srgb, var(--panel) 65%, transparent);
 | 
				
			||||||
			backdrop-filter: blur(16px);
 | 
					 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					@ -67,7 +66,6 @@ defineExpose({
 | 
				
			||||||
 | 
					
 | 
				
			||||||
			.note {
 | 
								.note {
 | 
				
			||||||
				background: color-mix(in srgb, var(--panel) 65%, transparent);
 | 
									background: color-mix(in srgb, var(--panel) 65%, transparent);
 | 
				
			||||||
				backdrop-filter: blur(16px);
 | 
					 | 
				
			||||||
				border-radius: var(--radius);
 | 
									border-radius: var(--radius);
 | 
				
			||||||
			}
 | 
								}
 | 
				
			||||||
		}
 | 
							}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -367,7 +367,7 @@ onUnmounted(() => {
 | 
				
			||||||
	background-size: cover;
 | 
						background-size: cover;
 | 
				
			||||||
	background-position: center;
 | 
						background-position: center;
 | 
				
			||||||
	pointer-events: none;
 | 
						pointer-events: none;
 | 
				
			||||||
	filter: blur(8px) opacity(0.6);
 | 
						filter: var(--blur, blur(10px)) opacity(0.6);
 | 
				
			||||||
	// Funny CSS schenanigans to make background escape container
 | 
						// Funny CSS schenanigans to make background escape container
 | 
				
			||||||
	left: -100%;
 | 
						left: -100%;
 | 
				
			||||||
	top: -5%;
 | 
						top: -5%;
 | 
				
			||||||
| 
						 | 
					@ -391,7 +391,6 @@ onUnmounted(() => {
 | 
				
			||||||
				position: relative;
 | 
									position: relative;
 | 
				
			||||||
				overflow: clip;
 | 
									overflow: clip;
 | 
				
			||||||
				background: color-mix(in srgb, var(--panel) 65%, transparent);
 | 
									background: color-mix(in srgb, var(--panel) 65%, transparent);
 | 
				
			||||||
				backdrop-filter: blur(16px);
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
				> .banner-container {
 | 
									> .banner-container {
 | 
				
			||||||
					position: relative;
 | 
										position: relative;
 | 
				
			||||||
| 
						 | 
					@ -755,7 +754,7 @@ onUnmounted(() => {
 | 
				
			||||||
	margin: calc(var(--margin) / 2) 0;
 | 
						margin: calc(var(--margin) / 2) 0;
 | 
				
			||||||
	padding: calc(var(--margin) / 2) 0;
 | 
						padding: calc(var(--margin) / 2) 0;
 | 
				
			||||||
	background: color-mix(in srgb, var(--bg) 65%, transparent);
 | 
						background: color-mix(in srgb, var(--bg) 65%, transparent);
 | 
				
			||||||
	backdrop-filter: blur(16px);
 | 
						backdrop-filter: var(--blur, blur(15px));
 | 
				
			||||||
	border-radius: 5px;
 | 
						border-radius: 5px;
 | 
				
			||||||
	> button {
 | 
						> button {
 | 
				
			||||||
		border-radius: 5px;
 | 
							border-radius: 5px;
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -268,7 +268,6 @@ hr {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
._panel {
 | 
					._panel {
 | 
				
			||||||
	background: color-mix(in srgb, var(--panel) 65%, transparent);
 | 
						background: color-mix(in srgb, var(--panel) 65%, transparent);
 | 
				
			||||||
	backdrop-filter: blur(16px);
 | 
					 | 
				
			||||||
	border-radius: var(--radius);
 | 
						border-radius: var(--radius);
 | 
				
			||||||
	overflow: clip;
 | 
						overflow: clip;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		
		Reference in a new issue