CSS-NibblePoker/scss/site/input.scss

// NibblePoker CSS Theme - CC0 1.0 (Public Domain)

/* Site > Elements > Inputs */

/* Site > Elements > Inputs > Commons */

button, input, textarea, select {
	border: 0;
	
	// Removing ugly-ass white glow when editing text-related inputs.
	// Shit looks straight out of winforms in 2023...
	outline: none;
	
	color: #{$color-text-inputs};
	background-color: #{$color-background-inputs};
	
	&:not(.no-focus) {
		&:focus {
			box-shadow: 0px 0px 3px 0px #{$color-input-glow};
		}
	}
	
	&:disabled {
		cursor: not-allowed;
		background-color: #{$color-background-code} !important;
	}
}

label {
	cursor: pointer;
	user-select: none;
}

/* Site > Elements > Inputs > Checkbox & Radio */

input[type=checkbox], input[type=radio] {
	width: 1.65em;
	height: 1.65em;
	background-color: #{$color-background-checkbox-unchecked};
	
	&:checked {
		background-color: #{$color-background-checkbox-checked};
	}
	
	position: relative;
	vertical-align: middle;

	&:not(:disabled) {
		cursor: pointer;
	}
	&:disabled {
		&:before {
			opacity: 60%;
		}
	}
}
input[type="checkbox"] + label, input[type="radio"] + label {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label {
	cursor: not-allowed;
	opacity: 60%;
}

/* Site > Elements > Inputs > Checkbox */

input[type=checkbox] {
	&.cb-pretty, &.checkbox-pretty {
		text-align: center;
		padding: 0;

		&:before {
			content: "✘";
		}

		&:checked {
			&:before {
				content: "✔";
			}
		}
	}
}

/* Site > Elements > Inputs > Radio */

input[type=radio] {
	border-radius: 50%;

	// Special fix required for standalone pages.
	// This rule somehow gets ignored if the stylesheet is placed in the DOM.
	// Even tho it is present in reset.css and if it get marked as important...
	&:before {
		box-sizing: border-box;
	}

	&.radio-solid, &.radio-3d {
		text-align: center;
		padding: 0;

		&:before {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 60%;
			height: 60%;
			border-radius: 50%;
			background-color: transparent;
			border-color: white;
		}

		&:checked {
			&:before {
				background-color: white;
			}
		}
	}

	&.radio-solid {
		&:before {
			border-style: double;
			border-width: 2px;
		}
	}

	&.radio-3d {
		&:before {
			border-style: inset;
			border-width: 2px;
		}

		&:checked {
			&:before {
				border-style: outset;
			}
		}
	}

	&.radio-unchecked-subtle {
		&:not(:checked) {
			&:before {
				opacity: 50%;
			}
		}
	}

	&.radio-unchecked-dashed {
		&:not(:checked) {
			&:before {
				opacity: 75%;
				clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
			}
		}
	}
}

/* Site > Elements > Inputs > Buttons */

button {
	cursor: pointer;
	background-color: #{$color-background-button};
	
	&:hover {
		background-color: #{$color-background-button-hover};
	}
	
	&.btn-primary {
		background-color: #{$color-background-button-primary};
		
		&:hover {
			background-color: #{$color-background-button-primary-hover};
		}
	}
	
	&.btn-success {
		background-color: #{$color-background-button-success};
		
		&:hover {
			background-color: #{$color-background-button-success-hover};
		}
	}
	
	&.btn-error {
		background-color: #{$color-background-button-error};
		
		&:hover {
			background-color: #{$color-background-button-error-hover};
		}
	}
	
	&.btn-warning {
		background-color: #{$color-background-button-warning};
		
		&:hover {
			background-color: #{$color-background-button-warning-hover};
		}
	}
}

// Ugly fix for download buttons
button + button, .button-link + .button-link > button {
	margin-left: 0.75rem;
}

/* Site > Elements > Inputs > Lang Selector */

#lang-selector {
	position: relative;
	white-space: nowrap;
	
	> summary {
		cursor: pointer;
		list-style: none;
		user-select: none;
	}
	
	> div {
		position: absolute;
		z-index: #{$z-index-lang-dropdown};
		top: 2rem;
		right: 0;
		min-width: 100%;
		
		// Visibility transition
		//height: 0;
		//transition: height 0.4s;
		//transition-timing-function: cubic-bezier(.25,.8,.25,1.1);
	}
	
	// TODO: Maybe force it to be visible when closes ?
	
	//&[open] > div {
	//	height: auto;
	//}
}


// TODO: Move to core !
.ta-resize {
	resize: both;
}

.ta-resize-h {
	resize: horizontal;
}

.ta-resize-v {
	resize: vertical;
}

.ta-resize-none {
	resize: none;
}