Drop CSS vendor prefixes and compat workarounds now obsolete in modern browsers (#4421)

frontend/package.json

@@ -3,7 +3,6 @@
 	"private": true,
 	"description": "Graphite's web app frontend.",
 	"author": "Graphite Authors <contact@graphite.art>",
-	"browserslist": "> 1.5%, last 2 versions, not dead, not ie 11, not op_mini all, not ios_saf < 13",
 	"type": "module",
 	"scripts": {
 		"check": "svelte-check --fail-on-warnings && eslint",

frontend/src/components/panels/Document.svelte

@@ -109,12 +109,10 @@
 		let totalSeparators = 0;
 		let totalToolRowsFor1Columns = 0;
 		let totalToolRowsFor2Columns = 0;
-		let totalToolRowsFor3Columns = 0;
 
 		const tally = () => {
 			totalToolRowsFor1Columns += toolsInCurrentGroup;
 			totalToolRowsFor2Columns += Math.ceil(toolsInCurrentGroup / 2);
-			totalToolRowsFor3Columns += Math.ceil(toolsInCurrentGroup / 3);
 			toolsInCurrentGroup = 0;
 		};
 
@@ -133,7 +131,6 @@
 			totalSeparators,
 			totalToolRowsFor1Columns,
 			totalToolRowsFor2Columns,
-			totalToolRowsFor3Columns,
 		};
 	})($document.toolShelfLayout[0]);
 
@@ -600,7 +597,6 @@
 			"--total-separators": toolShelfTotalToolsAndSeparators.totalSeparators,
 			"--total-tool-rows-for-1-columns": toolShelfTotalToolsAndSeparators.totalToolRowsFor1Columns,
 			"--total-tool-rows-for-2-columns": toolShelfTotalToolsAndSeparators.totalToolRowsFor2Columns,
-			"--total-tool-rows-for-3-columns": toolShelfTotalToolsAndSeparators.totalToolRowsFor3Columns,
 		}}
 	>
 		<LayoutCol class="tool-shelf">
@@ -810,21 +806,6 @@
 				.tools {
 					flex: 0 1 auto;
 
-					// Disabled because Firefox appears to have switched to using overlay scrollbars which float atop the content and don't affect the layout (as of FF 135 on Windows).
-					// We'll keep this here in case it's needed in the future.
-					//
-					// Firefox-specific workaround for this bug causing the scrollbar to cover up the toolbar instead of widening to accommodate the scrollbar:
-					// <https://bugzilla.mozilla.org/show_bug.cgi?id=764076>
-					// <https://stackoverflow.com/questions/63278303/firefox-does-not-take-vertical-scrollbar-width-into-account-when-calculating-par>
-					// Remove this when the Firefox bug is fixed.
-					// @-moz-document url-prefix() {
-					// 	--available-height-plus-1: calc(var(--available-height) + 1px);
-					// 	--3-col-required-height: calc(var(--total-tool-rows-for-3-columns) * calc(var(--tool-width) * 1px) + var(--total-separators) * var(--height-of-separator));
-					// 	--overflows-with-3-columns: calc(1px - clamp(0px, calc((var(--available-height-plus-1) - Min(var(--available-height-plus-1), var(--3-col-required-height))) * 1000000), 1px));
-					// 	--firefox-scrollbar-width-space-occupied: 2; // Might change someday, or on different platforms, but this is the value in FF 120 on Windows
-					// 	padding-right: calc(var(--firefox-scrollbar-width-space-occupied) * var(--overflows-with-3-columns));
-					// }
-
 					.widget-span {
 						flex-wrap: wrap;
 						width: var(--columns-width);
@@ -832,15 +813,6 @@
 						.icon-button {
 							margin: 0;
 
-							// &[data-tooltip-description^="Coming soon."] {
-							// 	opacity: 0.25;
-							// 	transition: opacity 0.1s;
-
-							// 	&:hover {
-							// 		opacity: 1;
-							// 	}
-							// }
-
 							&:not(.emphasized) {
 								.color-general {
 									fill: var(--color-data-general);

frontend/src/components/widgets/inputs/NumberInput.svelte

@@ -939,7 +939,6 @@
 				height: 100%;
 				padding: 0;
 				margin: 0;
-				-webkit-appearance: none; // Required until Safari 15.4 (Graphite supports 15.0+)
 				appearance: none;
 				background: none;
 				cursor: default;
@@ -964,7 +963,6 @@
 
 				// Chromium and Safari
 				&::-webkit-slider-thumb {
-					-webkit-appearance: none; // Required until Safari 15.4 (Graphite supports 15.0+)
 					appearance: none;
 					border-radius: 2px;
 					width: 4px;

website/sass/base.scss

@@ -457,7 +457,6 @@ p {
 	margin: 0;
 	text-align: justify;
 	text-justify: inter-character; // Only supported in Firefox
-	-webkit-hyphens: auto;
 	hyphens: auto;
 
 	code {
@@ -566,7 +565,6 @@ code {
 	background: var(--color-fog);
 	padding: 0 4px;
 	overflow-wrap: anywhere;
-	-webkit-hyphens: none;
 	hyphens: none;
 
 	a & {

website/sass/component/carousel.scss

@@ -46,26 +46,20 @@
 		top: 0;
 		z-index: -1;
 		// Torn edge mask
-		-webkit-mask-repeat: no-repeat;
 		mask-repeat: no-repeat;
-		-webkit-mask-size: contain;
 		mask-size: contain;
 
 		&.left {
 			padding-left: 160px;
 			margin-left: -160px;
-			-webkit-mask-image: url("https://static.graphite.art/textures/torn-edge-left__2.png");
 			mask-image: url("https://static.graphite.art/textures/torn-edge-left__2.png");
-			-webkit-mask-position: top left;
 			mask-position: top left;
 		}
 
 		&.right {
 			padding-right: 160px;
 			margin-right: -160px;
-			-webkit-mask-image: url("https://static.graphite.art/textures/torn-edge-right__2.png");
 			mask-image: url("https://static.graphite.art/textures/torn-edge-right__2.png");
-			-webkit-mask-position: top right;
 			mask-position: top right;
 		}
 	}

website/sass/page/blog.scss

@@ -98,7 +98,6 @@
 				gap: 20px;
 				text-align: justify;
 				text-justify: inter-character; // Only supported in Firefox
-				-webkit-hyphens: auto;
 				hyphens: auto;
 				overflow: hidden;
 				text-overflow: ellipsis;

website/sass/page/index.scss

@@ -440,7 +440,6 @@
 		gap: 20px;
 		text-align: justify;
 		text-justify: inter-character; // Only supported in Firefox
-		-webkit-hyphens: auto;
 		hyphens: auto;
 		overflow: hidden;
 		text-overflow: ellipsis;