/* ==UserStyle==
@name boringproxy Catppuccin
@namespace github.com/catppuccin/userstyles/styles/boringproxy
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/boringproxy
@version 0.0.1
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/boringproxy/catppuccin.user.css
@description Soothing pastel theme for boringproxy
@author Catppuccin
@license MIT

@preprocessor less
@var select flavor "Flavor" ["latte:Latte", "frappe:Frappe", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red*", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Grey"]
==/UserStyle== */
	@-moz-document domain("boring.example.com") {
		:root {
			#catppuccin(@flavor, @accentColor);
		}

		@catppuccin: {
			@latte: {
				@rosewater: #dc8a78;
				@flamingo: #dd7878;
				@pink: #ea76cb;
				@mauve: #8839ef;
				@red: #d20f39;
				@maroon: #e64553;
				@peach: #fe640b;
				@yellow: #df8e1d;
				@green: #40a02b;
				@teal: #179299;
				@sky: #04a5e5;
				@sapphire: #209fb5;
				@blue: #1e66f5;
				@lavender: #7287fd;
				@text: #4c4f69;
				@subtext1: #5c5f77;
				@subtext0: #6c6f85;
				@overlay2: #7c7f93;
				@overlay1: #8c8fa1;
				@overlay0: #9ca0b0;
				@surface2: #acb0be;
				@surface1: #bcc0cc;
				@surface0: #ccd0da;
				@base: #eff1f5;
				@mantle: #e6e9ef;
				@crust: #dce0e8;
			}
			@frappe: {
				@rosewater: #f2d5cf;
				@flamingo: #eebebe;
				@pink: #f4b8e4;
				@mauve: #ca9ee6;
				@red: #e78284;
				@maroon: #ea999c;
				@peach: #ef9f76;
				@yellow: #e5c890;
				@green: #a6d189;
				@teal: #81c8be;
				@sky: #99d1db;
				@sapphire: #85c1dc;
				@blue: #8caaee;
				@lavender: #babbf1;
				@text: #c6d0f5;
				@subtext1: #b5bfe2;
				@subtext0: #a5adce;
				@overlay2: #949cbb;
				@overlay1: #838ba7;
				@overlay0: #737994;
				@surface2: #626880;
				@surface1: #51576d;
				@surface0: #414559;
				@base: #303446;
				@mantle: #292c3c;
				@crust: #232634;
			}
			@macchiato: {
				@rosewater: #f4dbd6;
				@flamingo: #f0c6c6;
				@pink: #f5bde6;
				@mauve: #c6a0f6;
				@red: #ed8796;
				@maroon: #ee99a0;
				@peach: #f5a97f;
				@yellow: #eed49f;
				@green: #a6da95;
				@teal: #8bd5ca;
				@sky: #91d7e3;
				@sapphire: #7dc4e4;
				@blue: #8aadf4;
				@lavender: #b7bdf8;
				@text: #cad3f5;
				@subtext1: #b8c0e0;
				@subtext0: #a5adcb;
				@overlay2: #939ab7;
				@overlay1: #8087a2;
				@overlay0: #6e738d;
				@surface2: #5b6078;
				@surface1: #494d64;
				@surface0: #363a4f;
				@base: #24273a;
				@mantle: #1e2030;
				@crust: #181926;
			}
			@mocha: {
				@rosewater: #f5e0dc;
				@flamingo: #f2cdcd;
				@pink: #f5c2e7;
				@mauve: #cba6f7;
				@red: #f38ba8;
				@maroon: #eba0ac;
				@peach: #fab387;
				@yellow: #f9e2af;
				@green: #a6e3a1;
				@teal: #94e2d5;
				@sky: #89dceb;
				@sapphire: #74c7ec;
				@blue: #89b4fa;
				@lavender: #b4befe;
				@text: #cdd6f4;
				@subtext1: #bac2de;
				@subtext0: #a6adc8;
				@overlay2: #9399b2;
				@overlay1: #7f849c;
				@overlay0: #6c7086;
				@surface2: #585b70;
				@surface1: #45475a;
				@surface0: #313244;
				@base: #1e1e2e;
				@mantle: #181825;
				@crust: #11111b;
			}
		}
		;

		#catppuccin(@lookup, @accent) {
			@rosewater: @catppuccin[@@lookup][@rosewater];
			@flamingo: @catppuccin[@@lookup][@flamingo];
			@pink: @catppuccin[@@lookup][@pink];
			@mauve: @catppuccin[@@lookup][@mauve];
			@red: @catppuccin[@@lookup][@red];
			@maroon: @catppuccin[@@lookup][@maroon];
			@peach: @catppuccin[@@lookup][@peach];
			@yellow: @catppuccin[@@lookup][@yellow];
			@green: @catppuccin[@@lookup][@green];
			@teal: @catppuccin[@@lookup][@teal];
			@sky: @catppuccin[@@lookup][@sky];
			@sapphire: @catppuccin[@@lookup][@sapphire];
			@blue: @catppuccin[@@lookup][@blue];
			@lavender: @catppuccin[@@lookup][@lavender];
			@text: @catppuccin[@@lookup][@text];
			@subtext1: @catppuccin[@@lookup][@subtext1];
			@subtext0: @catppuccin[@@lookup][@subtext0];
			@overlay2: @catppuccin[@@lookup][@overlay2];
			@overlay1: @catppuccin[@@lookup][@overlay1];
			@overlay0: @catppuccin[@@lookup][@overlay0];
			@surface2: @catppuccin[@@lookup][@surface2];
			@surface1: @catppuccin[@@lookup][@surface1];
			@surface0: @catppuccin[@@lookup][@surface0];
			@base: @catppuccin[@@lookup][@base];
			@mantle: @catppuccin[@@lookup][@mantle];
			@crust: @catppuccin[@@lookup][@crust];
			@accent-color: @catppuccin[@@lookup][@@accent];

	     // Main Background
			body {
			  background: @base;
			}
		// Actual Panel	
			main {
			  background: @crust;
			}
			.content {
			  border: 1px solid @overlay0;
			}
			
		//Side Menu
			.menu {
			  background: @mantle;
			}
			.menu-item {
			 background: @crust;
			}
			.menu-item:hover {
			  background: @surface2;
			  color: @accent-color;
			}
			.menu-item:any-link {
			  color: @text;
			}
			
			// Right SIde Button
			.button {
			  border: 2px solid @accent-color;
			  background-color:@crust;
			  color: @subtext1;
			}
			.button:hover {
			  color: @surface0;
			  background-color:@accent-color;
			  border: 2px solid @crust;
			}
			
			// Top Headers
			.list {
			  background-color: @crust;
			}

			.list-item {
			  color: @accent-color;
			  
			}
		// Tunnel Table
			.tn-tunnel-link {
			  color: @subtext1;
			  text-decoration: none;
			}
			
			.tn-tunnel-table__cell {
			   color: @text;
			}
			body a {
			  color: @text;
			}
			body a:visited {
			  color:@accent-color;
			}
			
			.tn-attribute__name {
				color: @text;
			}
			.tn-attribute__value {
				color: @subtext0;
			}
	 //Tunnel Adding
		    .tunnel-adder h1 {
			  color: @text;
			}

			
			.input {
			  color:@text
			}
			.input input {
			  background-color:@crust;
			  color: @subtext0;
			  border:1px solid @accent-color;
			}
			
			.input select {
			  background-color:@crust;
			  color: @subtext0;
			  border:1px solid @accent-color;
			}

    // Token Adding
			.token-adder {
			  color: @text;
			}
			.token-adder select {
			  background-color:@crust;
			  color: @subtext0;
			  border:1px solid @accent-color;
			}
			
	// Client Adding
			.client-adder {
				color: @text;
			}
			.client-adder select {
			  background-color:@crust;
			  color: @subtext0;
			  border:1px solid @accent-color;
			}
			.client-adder input {
			  background-color:@crust;
			  color: @subtext0;
			  border:1px solid @accent-color;
			}
			
	// User Adding
			.user-adder {
				color: @text;
			}
			.user-adder input {
			  background-color:@crust;
			  color: @subtext0;
			  border:1px solid @accent-color;
			}
// dialog
			.dialog__content {
				background-color:@crust;
				color: @text;
			}
			
}}