mtserverrequest.user.css

/* ==UserStyle==
@name           MTServerRequest
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A different style for mtserverrequest
@homepageURL  	https://edugit.org/-/snippets/32
@updateURL    	https://edugit.org/-/snippets/32/raw/main/mtserverrequest.user.css
@author         Miniontoby
==/UserStyle== */

@-moz-document url-prefix("https://ircforever.org/mtserverrequest") {
    :root {
		--color-bg: #f7f7f7;
		--color-font: #000;
		--color-primary: #077c9d /*#07c3f7 */;
		--color-primary-transparent: #07c3f788;
		--color-primary-dark:  #065d75/*#089bc4*/;
		--color-secondary: #ddd;
		--color-secondary-dark: #aaa;
		--border-radius: 7px;
	}
	[data-theme="dark"] {
		--color-bg: #000;
		--color-font: #aaa;
	}
	body, 
	button, 
	input {
		font-family: MONOSPACE;
	}

	body {
		overflow-x: hidden;
	} 

	h2 {
		text-align: center;
		margin-top: 30px;
	}

	form {
		background-color: var(--color-bg);
		border-radius: 20px;
		width: 70vw;
		min-width: 450px;
		padding: 30px;
		position: relative;
		right: -50%;
		transform: translateX(-50%);
	}

	input, 
	button, 
	textarea {
	  border-radius: var(--border-radius);
		padding: 10px;
		border: 2px solid var(--color-secondary);
	}

	button:focus,
	input:focus,
	textarea:focus {
	  border: 2px solid var(--color-primary);
		outline-color: var(--color-primary-transparent);
	}

	button,
	input[type="submit"],
	input[type="reset"] {
		-webkit-transition: all 0s ease-out;
		-moz-transition: all 0s ease-out;
		-o-transition: all 0s ease-out;
		-ms-transition: all 0s ease-out;
		transition: all 0s ease-out;
		height: 35px;
		display: inline-block;
		font-size: 14px;
		color: #fff;
		text-decoration: none;
		text-align: center;
		text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
		padding: 4px 20px 0;
		margin: 10px auto;
		left: 30px;
		position: relative;
		cursor: pointer;
		border: none;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;

		border-left: solid 1px var(--color-primary-dark);
		background: var(--color-primary);
		-webkit-box-shadow: 0px 5px 0px 0px var(--color-primary-dark);
		box-shadow: 0px 5px 0px 0px var(--color-primary-dark);
	}

	input[type="reset"] {
		color: #555;

		border-left: solid 1px var(--color-secondary-dark);
		background: var(--color-secondary);
		-webkit-box-shadow: 0px 5px 0px 0px var(--color-secondary-dark);
		box-shadow: 0px 5px 0px 0px var(--color-secondary-dark);
	}

	button:active,
	input[type="submit"]:active,
	input[type="reset"]:active {
		top: 3px;

		-webkit-box-shadow: 0px 2px 0px 0px var(--color-primary-dark);
		box-shadow: 0px 2px 0px 0px var(--color-primary-dark);
	}

	input[type="reset"]:active {
		-webkit-box-shadow: 0px 2px 0px 0px var(--color-secondary-dark);
		box-shadow: 0px 2px 0px 0px var(--color-secondary-dark);
	}

	button:before,
	input[type="submit"]:before,
	input[type="reset"]:before {
		content: "1";
		width: 35px;
		height: 25px;
		display: block;
		position: absolute;
		padding-top: 10px;
		line-height: 20px;
		top: 0px;
		margin-left: -54px;
		font-size: 16px;
		font-weight: bold;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;

			border-right: solid 1px var(--color-primary-dark);
		background: var(--color-primary);

		-webkit-box-shadow: 0px 5px 0px 0px var(--color-primary-dark);
		box-shadow: 0px 5px 0px 0px var(--color-primary-dark);
	}

	input[type="reset"]:before {
		border-right: solid 1px var(--color-secondary-dark);
		background: var(--color-secondary);

		-webkit-box-shadow: 0px 5px 0px 0px var(--color-secondary-dark);
		box-shadow: 0px 5px 0px 0px var(--color-secondary-dark);
	}

	button:active:before,
	input[type="submit"]:active:before,
	input[type="reset"]:active:before {
		top: -3px;

			-webkit-box-shadow: 0px 5px 0px 0px var(--color-primary-dark), 6px 4px 2px rgba(0,0,0,0.3);
		box-shadow: 0px 5px 0px 0px var(--color-primary-dark), 6px 4px 2px rgba(0,0,0,0.3);
	}

	input[type="reset"]:active:before {
				-webkit-box-shadow: 0px 5px 0px 0px var(--color-secondary-dark), 6px 4px 2px rgba(0,0,0,0.3);
		box-shadow: 0px 5px 0px 0px var(--color-secondary-dark), 6px 4px 2px rgba(0,0,0,0.3);
	}
}