User:FrankFrankUltimate/citizen.css - Revision history

FrankFrankUltimate: nvm fuck these menus lol

2025-12-28T21:16:02Z

nvm fuck these menus lol

← Older revision		Revision as of 21:16, 28 December 2025
Line 54:		Line 54:
	}		}

	~~/* Target the card specifically */~~
	~~.citizen-menu__card {~~
	~~background: rgba(255, 255, 255, 0.1) !important;~~
	~~backdrop-filter: blur(15px) saturate(180%) !important;~~
	~~-webkit-backdrop-filter: blur(15px) saturate(180%) !important;~~
	~~border: 1px solid rgba(255, 255, 255, 0.2) !important;~~
	~~border-radius: 20px !important; /* Menus usually look better with tighter radii than the header */~~
	~~box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1) !important;~~

	~~/* This helps backdrop-filter trigger in stubborn browsers */~~
	~~transform: translateZ(0);~~
	~~isolation: isolate;~~
	}

	/* --------------- FONT -------------- */		/* --------------- FONT -------------- */

FrankFrankUltimate at 21:14, 28 December 2025

2025-12-28T21:14:58Z

← Older revision		Revision as of 21:14, 28 December 2025
Line 54:		Line 54:
	}		}

	~~.citizen-menu__card {~~ /~~for some reaon I cant get THIS SPECIFICALLY to blur, but fuck it we ball~~ /		/* Target the card specifically */
	~~content~~-~~visibility: visible;~~		.citizen-menu__card {
	~~transform: none;~~		background: rgba(255, 255, 255, 0.1) !important;
	~~transition-timing-function: var(--transition-timing-function-ease-out);~~
	~~transition-duration: var(--transition-duration-medium);~~
	~~margin: 15px !important;~~
	~~border-radius: 50px !important;~~
	background: rgba(255,255,255,0.1) !important;
	backdrop-filter: blur(15px) saturate(180%) !important;		backdrop-filter: blur(15px) saturate(180%) !important;
	border: 1px solid rgba(255,255,255,0.2) !important;		-webkit-backdrop-filter: blur(15px) saturate(180%) !important;
	box-shadow: 0 8px 32px 0 rgba(0,0,0,0.1)~~,inset 0 0 0 1px rgba~~(~~255,255,255,~~0.1) ~~!important~~;		border: 1px solid rgba(255, 255, 255, 0.2) !important;
			border-radius: 20px !important; /* Menus usually look better with tighter radii than the header */
			box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1) !important;

			/* This helps backdrop-filter trigger in stubborn browsers */
			transform: translateZ(0);
			isolation: isolate;
	}		}

FrankFrankUltimate at 21:13, 28 December 2025

2025-12-28T21:13:34Z

← Older revision		Revision as of 21:13, 28 December 2025
Line 54:		Line 54:
	}		}

	~~.citizen-dropdown-details[open] +~~ .citizen-menu__card { /for some reaon I cant get THIS SPECIFICALLY to blur, but fuck it we ball /		.citizen-menu__card { /for some reaon I cant get THIS SPECIFICALLY to blur, but fuck it we ball /
	content-visibility: visible;		content-visibility: visible;
	transform: none;		transform: none;

FrankFrankUltimate at 21:11, 28 December 2025

2025-12-28T21:11:04Z

@@ Line 50: / Line 50: @@
      backdrop-filter: blur(15px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(15px) saturate(180%);
      border: 1px solid rgba(255,255,255,0.2) !important;
      box-shadow: 0 8px 32px 0 rgba(0,0,0,0.1),inset 0 0 0 1px rgba(255,255,255,0.1) !important;

FrankFrankUltimate at 21:00, 28 December 2025

2025-12-28T21:00:56Z

@@ Line 1: / Line 1: @@
 .citizen-header {
      margin: 15px !important;
@@ Line 50: / Line 52: @@
      border: 1px solid rgba(255,255,255,0.2) !important;
      box-shadow: 0 8px 32px 0 rgba(0,0,0,0.1),inset 0 0 0 1px rgba(255,255,255,0.1) !important;
+}

FrankFrankUltimate: i'm pretty sure you get the point by now

2025-12-28T20:54:44Z

i'm pretty sure you get the point by now

@@ Line 37: / Line 37: @@
      border-radius: 50px;
      color: var(--background-color-progressive);
+}

FrankFrankUltimate at 20:51, 28 December 2025

2025-12-28T20:51:19Z

← Older revision		Revision as of 20:51, 28 December 2025
Line 34:		Line 34:
	}		}
	#ca-edit > a, #ca-ve-edit > a {		#ca-edit > a, #ca-ve-edit > a {
	background-color: oklch(0 0 0 / 0.21);		background-color: oklch(0 0 0 / 0.10);
	border-radius: 50px;		border-radius: 50px;
	color: var(--background-color-progressive);		color: var(--background-color-progressive);
	}		}

FrankFrankUltimate: more liquid glass

2025-12-28T20:50:56Z

more liquid glass

← Older revision		Revision as of 20:50, 28 December 2025
Line 32:		Line 32:
	border: 1px solid rgba(255,255,255,0.2) !important;		border: 1px solid rgba(255,255,255,0.2) !important;
	box-shadow: 0 8px 32px 0 rgba(0,0,0,0.1),inset 0 0 0 1px rgba(255,255,255,0.1) !important;		box-shadow: 0 8px 32px 0 rgba(0,0,0,0.1),inset 0 0 0 1px rgba(255,255,255,0.1) !important;
			}
			#ca-edit > a, #ca-ve-edit > a {
			background-color: oklch(0 0 0 / 0.21);
			border-radius: 50px;
			color: var(--background-color-progressive);
	}		}

FrankFrankUltimate: more liquid glass

2025-12-28T20:43:34Z

more liquid glass

← Older revision		Revision as of 20:43, 28 December 2025
Line 19:		Line 19:
	/fuck that, let it happen/		/fuck that, let it happen/

			}

			.page-actions {
			display: flex;
			gap: var(--space-xxs);
			align-items: center;
			margin: 15px !important;
			border-radius: 50px !important;
			background: rgba(255,255,255,0.1) !important;
			backdrop-filter: blur(15px) saturate(180%) !important;
			-webkit-backdrop-filter: blur(15px) saturate(180%);
			border: 1px solid rgba(255,255,255,0.2) !important;
			box-shadow: 0 8px 32px 0 rgba(0,0,0,0.1),inset 0 0 0 1px rgba(255,255,255,0.1) !important;
	}		}

FrankFrankUltimate: Liquid glass test

2025-12-28T20:36:18Z

Liquid glass test

New page

.citizen-header {
margin: 15px !important;
border-radius: 50px !important;

/* The "Glass" Core */
background: rgba(255, 255, 255, 0.1) !important;
backdrop-filter: blur(15px) saturate(180%) !important;
-webkit-backdrop-filter: blur(15px) saturate(180%);

/* The "Liquid" Edge - creates the refraction look */
border: 1px solid rgba(255, 255, 255, 0.2) !important;

/* Depth and Shine */
box-shadow:
0 8px 32px 0 rgba(0, 0, 0, 0.1),
inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;

/* Ensuring content doesn't bleed out of the rounded corners */
/*fuck that, let it happen*/

}