Improve webkit compatibility

DeclanChidlow · Feb 14, 2024 · 941e7e3 · 941e7e3
1 parent db99604
commit 941e7e3
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 12 deletions.
diff --git a/config/global/style/input.css b/config/global/style/input.css
@@ -3,11 +3,15 @@ button,
 textarea,
 select {
 	color: var(--bright_white);
+	-webkit-text-fill-color: var(--bright_white);
 	padding: 2px 0;
 	margin: 4px 0;
 	background: var(--grey);
 	border: none;
+	border-radius: 0;
 	text-overflow: ellipsis;
+	appearance: none;
+	-webkit-appearance: none;
 }
 
 input[type="search"],

diff --git a/config/global/style/navbar.css b/config/global/style/navbar.css
@@ -11,6 +11,7 @@ nav {
 	align-items: center;
 	justify-content: flex-end;
 	text-align: right;
+	pointer-events: none;
 	z-index: 100;
 }
 
@@ -22,12 +23,12 @@ nav::after {
 	width: 100%;
 	height: 100%;
 	background: linear-gradient(var(--black), transparent);
-	pointer-events: none;
 	z-index: -1;
 }
 
 nav ul {
 	all: unset;
+	pointer-events: initial;
 }
 
 nav li {

diff --git a/config/global/style/type.css b/config/global/style/type.css
@@ -1,9 +1,9 @@
-@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
+@import url("https://fonts.googleapis.com/css2?family=Lexend&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined");
 
 html {
-	font-family: 'Lexend', sans-serif;
+	font-family: "Lexend", sans-serif;
 	color: var(--bright_white);
 }
 
@@ -26,6 +26,7 @@ h6 {
 	margin: 15vh 0 0 -6.5rem;
 	position: fixed;
 	user-select: none;
+	-webkit-user-select: none;
 	line-height: 0;
 }
 
@@ -73,7 +74,7 @@ pre {
 }
 
 code {
-	font-family: 'Fira Code', monospace;
+	font-family: "Fira Code", monospace;
 	overflow: inherit;
 	display: inline-block;
 	tab-size: 4;
@@ -127,6 +128,7 @@ li {
 		margin: inherit;
 		position: inherit;
 		user-select: inherit;
+		-webkit-user-select: inherit;
 		line-height: 3.2rem;
 	}
 }
diff --git a/docs/style/input.css b/docs/style/input.css
@@ -3,11 +3,15 @@ button,
 textarea,
 select {
 	color: var(--bright_white);
+	-webkit-text-fill-color: var(--bright_white);
 	padding: 2px 0;
 	margin: 4px 0;
 	background: var(--grey);
 	border: none;
+	border-radius: 0;
 	text-overflow: ellipsis;
+	appearance: none;
+	-webkit-appearance: none;
 }
 
 input[type="search"],

diff --git a/docs/style/navbar.css b/docs/style/navbar.css
@@ -11,6 +11,7 @@ nav {
 	align-items: center;
 	justify-content: flex-end;
 	text-align: right;
+	pointer-events: none;
 	z-index: 100;
 }
 
@@ -22,12 +23,12 @@ nav::after {
 	width: 100%;
 	height: 100%;
 	background: linear-gradient(var(--black), transparent);
-	pointer-events: none;
 	z-index: -1;
 }
 
 nav ul {
 	all: unset;
+	pointer-events: initial;
 }
 
 nav li {

diff --git a/docs/style/type.css b/docs/style/type.css
@@ -1,9 +1,9 @@
-@import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');
+@import url("https://fonts.googleapis.com/css2?family=Lexend&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined");
 
 html {
-	font-family: 'Lexend', sans-serif;
+	font-family: "Lexend", sans-serif;
 	color: var(--bright_white);
 }
 
@@ -26,6 +26,7 @@ h6 {
 	margin: 15vh 0 0 -6.5rem;
 	position: fixed;
 	user-select: none;
+	-webkit-user-select: none;
 	line-height: 0;
 }
 
@@ -73,7 +74,7 @@ pre {
 }
 
 code {
-	font-family: 'Fira Code', monospace;
+	font-family: "Fira Code", monospace;
 	overflow: inherit;
 	display: inline-block;
 	tab-size: 4;
@@ -127,6 +128,7 @@ li {
 		margin: inherit;
 		position: inherit;
 		user-select: inherit;
+		-webkit-user-select: inherit;
 		line-height: 3.2rem;
 	}
 }