mirror of
				https://codeberg.org/yeentown/barkey.git
				synced 2025-11-04 07:24:13 +00:00 
			
		
		
		
	🎨
This commit is contained in:
		
							parent
							
								
									ca967e83bd
								
							
						
					
					
						commit
						1d8bfe4f1c
					
				
					 7 changed files with 17 additions and 19 deletions
				
			
		| 
						 | 
					@ -53,11 +53,13 @@
 | 
				
			||||||
		infoFg: '#fff',
 | 
							infoFg: '#fff',
 | 
				
			||||||
		infoWarnBg: '#42321c',
 | 
							infoWarnBg: '#42321c',
 | 
				
			||||||
		infoWarnFg: '#ffbd3e',
 | 
							infoWarnFg: '#ffbd3e',
 | 
				
			||||||
		switchBg: 'rgba(255, 255, 255, 0.15)',
 | 
							folderHeaderBg: 'rgba(255, 255, 255, 0.05)',
 | 
				
			||||||
		buttonBg: 'rgba(255, 255, 255, 0.05)',
 | 
							folderHeaderHoverBg: 'rgba(255, 255, 255, 0.1)',
 | 
				
			||||||
		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
 | 
							buttonBg: ':lighten<5<@panel',
 | 
				
			||||||
 | 
							buttonHoverBg: ':lighten<10<@panel',
 | 
				
			||||||
		buttonGradateA: '@accent',
 | 
							buttonGradateA: '@accent',
 | 
				
			||||||
		buttonGradateB: ':hue<20<@accent',
 | 
							buttonGradateB: ':hue<20<@accent',
 | 
				
			||||||
 | 
							switchBg: 'rgba(255, 255, 255, 0.15)',
 | 
				
			||||||
		switchOffBg: 'rgba(255, 255, 255, 0.1)',
 | 
							switchOffBg: 'rgba(255, 255, 255, 0.1)',
 | 
				
			||||||
		switchOffFg: ':alpha<0.8<@fg',
 | 
							switchOffFg: ':alpha<0.8<@fg',
 | 
				
			||||||
		switchOnBg: '@accentedBg',
 | 
							switchOnBg: '@accentedBg',
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -53,11 +53,13 @@
 | 
				
			||||||
		infoFg: '#72818a',
 | 
							infoFg: '#72818a',
 | 
				
			||||||
		infoWarnBg: '#fff0db',
 | 
							infoWarnBg: '#fff0db',
 | 
				
			||||||
		infoWarnFg: '#8f6e31',
 | 
							infoWarnFg: '#8f6e31',
 | 
				
			||||||
		switchBg: 'rgba(0, 0, 0, 0.15)',
 | 
							folderHeaderBg: 'rgba(0, 0, 0, 0.05)',
 | 
				
			||||||
		buttonBg: 'rgba(0, 0, 0, 0.05)',
 | 
							folderHeaderHoverBg: 'rgba(0, 0, 0, 0.1)',
 | 
				
			||||||
		buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
 | 
							buttonBg: ':darken<5<@panel',
 | 
				
			||||||
 | 
							buttonHoverBg: ':darken<10<@panel',
 | 
				
			||||||
		buttonGradateA: '@accent',
 | 
							buttonGradateA: '@accent',
 | 
				
			||||||
		buttonGradateB: ':hue<20<@accent',
 | 
							buttonGradateB: ':hue<20<@accent',
 | 
				
			||||||
 | 
							switchBg: 'rgba(0, 0, 0, 0.15)',
 | 
				
			||||||
		switchOffBg: 'rgba(0, 0, 0, 0.1)',
 | 
							switchOffBg: 'rgba(0, 0, 0, 0.1)',
 | 
				
			||||||
		switchOffFg: '@panel',
 | 
							switchOffFg: '@panel',
 | 
				
			||||||
		switchOnBg: '@accent',
 | 
							switchOnBg: '@accent',
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -25,7 +25,6 @@
 | 
				
			||||||
		mention: '#ffd152',
 | 
							mention: '#ffd152',
 | 
				
			||||||
		modalBg: 'rgba(0, 0, 0, 0.5)',
 | 
							modalBg: 'rgba(0, 0, 0, 0.5)',
 | 
				
			||||||
		success: '#86b300',
 | 
							success: '#86b300',
 | 
				
			||||||
		buttonBg: 'rgba(255, 255, 255, 0.05)',
 | 
					 | 
				
			||||||
		acrylicBg: ':alpha<0.5<@bg',
 | 
							acrylicBg: ':alpha<0.5<@bg',
 | 
				
			||||||
		indicator: '@accent',
 | 
							indicator: '@accent',
 | 
				
			||||||
		mentionMe: '#fb5d38',
 | 
							mentionMe: '#fb5d38',
 | 
				
			||||||
| 
						 | 
					@ -42,7 +41,6 @@
 | 
				
			||||||
		acrylicPanel: ':alpha<0.5<@panel',
 | 
							acrylicPanel: ':alpha<0.5<@panel',
 | 
				
			||||||
		navIndicator: '@accent',
 | 
							navIndicator: '@accent',
 | 
				
			||||||
		accentLighten: ':lighten<10<@accent',
 | 
							accentLighten: ':lighten<10<@accent',
 | 
				
			||||||
		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
 | 
					 | 
				
			||||||
		buttonGradateA: '@accent',
 | 
							buttonGradateA: '@accent',
 | 
				
			||||||
		buttonGradateB: ':hue<-20<@accent',
 | 
							buttonGradateB: ':hue<-20<@accent',
 | 
				
			||||||
		driveFolderBg: ':alpha<0.3<@accent',
 | 
							driveFolderBg: ':alpha<0.3<@accent',
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -38,7 +38,6 @@
 | 
				
			||||||
		mention: '@accent',
 | 
							mention: '@accent',
 | 
				
			||||||
		modalBg: 'rgba(0, 0, 0, 0.5)',
 | 
							modalBg: 'rgba(0, 0, 0, 0.5)',
 | 
				
			||||||
		success: '#86b300',
 | 
							success: '#86b300',
 | 
				
			||||||
		buttonBg: 'rgba(255, 255, 255, 0.05)',
 | 
					 | 
				
			||||||
		switchBg: 'rgba(255, 255, 255, 0.15)',
 | 
							switchBg: 'rgba(255, 255, 255, 0.15)',
 | 
				
			||||||
		acrylicBg: ':alpha<0.5<@bg',
 | 
							acrylicBg: ':alpha<0.5<@bg',
 | 
				
			||||||
		indicator: '@accent',
 | 
							indicator: '@accent',
 | 
				
			||||||
| 
						 | 
					@ -61,7 +60,6 @@
 | 
				
			||||||
		acrylicPanel: ':alpha<0.5<@panel',
 | 
							acrylicPanel: ':alpha<0.5<@panel',
 | 
				
			||||||
		navIndicator: '@indicator',
 | 
							navIndicator: '@indicator',
 | 
				
			||||||
		accentLighten: ':lighten<10<@accent',
 | 
							accentLighten: ':lighten<10<@accent',
 | 
				
			||||||
		buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
 | 
					 | 
				
			||||||
		driveFolderBg: ':alpha<0.3<@accent',
 | 
							driveFolderBg: ':alpha<0.3<@accent',
 | 
				
			||||||
		fgHighlighted: ':lighten<3<@fg',
 | 
							fgHighlighted: ':lighten<3<@fg',
 | 
				
			||||||
		fgTransparent: ':alpha<0.5<@fg',
 | 
							fgTransparent: ':alpha<0.5<@fg',
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -28,7 +28,6 @@
 | 
				
			||||||
		mention: '@accent',
 | 
							mention: '@accent',
 | 
				
			||||||
		modalBg: 'rgba(0, 0, 0, 0.3)',
 | 
							modalBg: 'rgba(0, 0, 0, 0.3)',
 | 
				
			||||||
		success: '#86b300',
 | 
							success: '#86b300',
 | 
				
			||||||
		buttonBg: 'rgba(0, 0, 0, 0.05)',
 | 
					 | 
				
			||||||
		acrylicBg: ':alpha<0.5<@bg',
 | 
							acrylicBg: ':alpha<0.5<@bg',
 | 
				
			||||||
		indicator: '@accent',
 | 
							indicator: '@accent',
 | 
				
			||||||
		mentionMe: '@mention',
 | 
							mentionMe: '@mention',
 | 
				
			||||||
| 
						 | 
					@ -45,7 +44,6 @@
 | 
				
			||||||
		acrylicPanel: ':alpha<0.5<@panel',
 | 
							acrylicPanel: ':alpha<0.5<@panel',
 | 
				
			||||||
		navIndicator: '@accent',
 | 
							navIndicator: '@accent',
 | 
				
			||||||
		accentLighten: ':lighten<10<@accent',
 | 
							accentLighten: ':lighten<10<@accent',
 | 
				
			||||||
		buttonHoverBg: 'rgba(0, 0, 0, 0.1)',
 | 
					 | 
				
			||||||
		driveFolderBg: ':alpha<0.3<@accent',
 | 
							driveFolderBg: ':alpha<0.3<@accent',
 | 
				
			||||||
		fgHighlighted: ':darken<3<@fg',
 | 
							fgHighlighted: ':darken<3<@fg',
 | 
				
			||||||
		fgTransparent: ':alpha<0.5<@fg',
 | 
							fgTransparent: ':alpha<0.5<@fg',
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -139,7 +139,7 @@ onMounted(() => {
 | 
				
			||||||
	width: 100%;
 | 
						width: 100%;
 | 
				
			||||||
	box-sizing: border-box;
 | 
						box-sizing: border-box;
 | 
				
			||||||
	padding: 9px 12px 9px 12px;
 | 
						padding: 9px 12px 9px 12px;
 | 
				
			||||||
	background: var(--buttonBg);
 | 
						background: var(--folderHeaderBg);
 | 
				
			||||||
	-webkit-backdrop-filter: var(--blur, blur(15px));
 | 
						-webkit-backdrop-filter: var(--blur, blur(15px));
 | 
				
			||||||
	backdrop-filter: var(--blur, blur(15px));
 | 
						backdrop-filter: var(--blur, blur(15px));
 | 
				
			||||||
	border-radius: 6px;
 | 
						border-radius: 6px;
 | 
				
			||||||
| 
						 | 
					@ -147,7 +147,7 @@ onMounted(() => {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	&:hover {
 | 
						&:hover {
 | 
				
			||||||
		text-decoration: none;
 | 
							text-decoration: none;
 | 
				
			||||||
		background: var(--buttonHoverBg);
 | 
							background: var(--folderHeaderHoverBg);
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	&:focus-within {
 | 
						&:focus-within {
 | 
				
			||||||
| 
						 | 
					@ -156,7 +156,7 @@ onMounted(() => {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	&.active {
 | 
						&.active {
 | 
				
			||||||
		color: var(--accent);
 | 
							color: var(--accent);
 | 
				
			||||||
		background: var(--buttonHoverBg);
 | 
							background: var(--folderHeaderHoverBg);
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	&.opened {
 | 
						&.opened {
 | 
				
			||||||
| 
						 | 
					@ -233,7 +233,7 @@ onMounted(() => {
 | 
				
			||||||
	z-index: 1;
 | 
						z-index: 1;
 | 
				
			||||||
	bottom: var(--stickyBottom, 0px);
 | 
						bottom: var(--stickyBottom, 0px);
 | 
				
			||||||
	left: 0;
 | 
						left: 0;
 | 
				
			||||||
	padding: 9px 12px;
 | 
						padding: 12px;
 | 
				
			||||||
	background: var(--acrylicBg);
 | 
						background: var(--acrylicBg);
 | 
				
			||||||
	-webkit-backdrop-filter: var(--blur, blur(15px));
 | 
						-webkit-backdrop-filter: var(--blur, blur(15px));
 | 
				
			||||||
	backdrop-filter: var(--blur, blur(15px));
 | 
						backdrop-filter: var(--blur, blur(15px));
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -51,18 +51,18 @@ const props = defineProps<{
 | 
				
			||||||
	width: 100%;
 | 
						width: 100%;
 | 
				
			||||||
	box-sizing: border-box;
 | 
						box-sizing: border-box;
 | 
				
			||||||
	padding: 10px 14px;
 | 
						padding: 10px 14px;
 | 
				
			||||||
	background: var(--buttonBg);
 | 
						background: var(--folderHeaderBg);
 | 
				
			||||||
	border-radius: 6px;
 | 
						border-radius: 6px;
 | 
				
			||||||
	font-size: 0.9em;
 | 
						font-size: 0.9em;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	&:hover {
 | 
						&:hover {
 | 
				
			||||||
		text-decoration: none;
 | 
							text-decoration: none;
 | 
				
			||||||
		background: var(--buttonHoverBg);
 | 
							background: var(--folderHeaderHoverBg);
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	&.active {
 | 
						&.active {
 | 
				
			||||||
		color: var(--accent);
 | 
							color: var(--accent);
 | 
				
			||||||
		background: var(--buttonHoverBg);
 | 
							background: var(--folderHeaderHoverBg);
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		
		Reference in a new issue