refactor: ♻️ Remove styles affecting Foundry GUI

fvtt-fria-ligan · Aug 15, 2024 · b628332 · b628332
1 parent 1d2974d
commit b628332
Show file tree

Hide file tree

Showing 19 changed files with 283 additions and 813 deletions.
diff --git a/.changeset/sour-apricots-tan.md b/.changeset/sour-apricots-tan.md
@@ -0,0 +1,5 @@
+---
+"forbidden-lands": minor
+---
+
+Greatly reducing the amount of styling that the system does to foundry. Foundry is in the process of implementing themes, and application v2. The maintenance cost of overriding native UI is too high to be worth it.
diff --git a/src/changelog/_index.scss b/src/changelog/_index.scss
@@ -1,14 +1,14 @@
 .app.fbl.changelog {
 	.dialog-content {
-		font-family: var(--font-editor);
+		font-family: var(--font-alternative);
 		padding-inline: 16px;
 		line-height: 165%;
 	}
 
 	h1,
 	h2,
 	h3 {
-		font-family: var(--font-subheader);
+		font-family: var(--font-header-sc);
 		border: none;
 	}
 
@@ -31,13 +31,14 @@
 	details {
 		margin-bottom: 8px;
 
-		summary > i {
+		summary>i {
 			transition: transform 0.2s ease-in-out;
 		}
 
 		&[open] summary {
 			margin-bottom: 20px;
-			& > i {
+
+			&>i {
 				transform: rotate(90deg);
 			}
 		}
@@ -60,4 +61,4 @@
 			content: none;
 		}
 	}
-}
+}
diff --git a/src/journal/styles/_journal.scss b/src/journal/styles/_journal.scss
@@ -4,52 +4,12 @@
 /*              Overrides               */
 /* ------------------------------------ */
 
-// Background of the journal entry page
-.sheet.journal-entry .journal-entry-content {
-	background: var(--color-background);
-	border: unset;
-	border-radius: unset;
-}
-
-// Sidebar
-.sheet.journal-entry {
-	.journal-sidebar {
-		color: var(--color-text-dark-primary);
-
-		.header-search input {
-			background-color: #eeed;
-		}
-	}
-}
-
 // Force proper height
 .app.sheet .editor {
 	min-height: 55px;
 	height: 100%;
 }
 
-// Edit button
-.editor:focus,
-.editor:hover,
-.journal-entry-page.text:focus .edit-container,
-.journal-entry-page.text:hover .edit-container {
-	.editor-edit {
-		background: #cccd;
-		border: none;
-		box-shadow: 0 0 3px #1119;
-		right: 10px;
-		width: 24px;
-		height: 24px;
-		display: grid;
-		place-content: center;
-		z-index: 100;
-
-		i {
-			font-size: var(--font-size-16);
-		}
-	}
-}
-
 /* ------------------------------------ */
 /*               Header                 */
 /* ------------------------------------ */
@@ -91,11 +51,6 @@
 	}
 }
 
-// Remove header if book-type
-.fbl-book .journal-header {
-	display: none;
-}
-
 /* ------------------------------------ */
 /*               Content                */
 /* ------------------------------------ */
@@ -138,7 +93,7 @@
 
 // Page Content
 :where(.journal-page-content, .editor-content) {
-	font-family: var(--font-editor);
+	font-family: var(--font-alternative);
 	line-height: 1.75;
 	font-size: var(--font-size-16);
 

diff --git a/src/legacy-styles/components/_chat.scss b/src/legacy-styles/components/_chat.scss
@@ -1,8 +1,8 @@
 .forbidden-lands.chat-item {
 	background: var(--color-background);
 	border-radius: 3px;
-	color: var(--color-foreground);
-	font-family: var(--font-table);
+	color: var(--color-theme-text);
+	font-family: var(--font-body);
 	font-size: var(--font-size-12);
 	line-height: 16px;
 	padding: 8px;
@@ -15,37 +15,44 @@
 .forbidden-lands.chat-item .border {
 	padding: 8px;
 }
+
 .forbidden-lands.chat-item .link-header {
 	text-align: center;
 }
+
 .forbidden-lands.chat-item strong {
 	text-transform: uppercase;
 }
+
 .forbidden-lands.chat-item h3 {
-	font-family: var(--font-subheader);
+	font-family: var(--font-header-sc);
 	font-size: var(--font-size-14);
 	font-weight: bold;
 	margin: 0 0 8px;
 	text-align: center;
 }
+
 .forbidden-lands.chat-item h4 {
-	font-family: var(--font-special);
+	font-family: var(--font-alternative);
 	font-size: var(--font-size-14);
 	font-weight: bold;
 	margin: 0 0 8px;
 	text-align: center;
 }
-.forbidden-lands.chat-item h3 + h4 {
+
+.forbidden-lands.chat-item h3+h4 {
 	margin-top: -8px;
 }
+
 .forbidden-lands.chat-item img {
-	background: radial-gradient(closest-side, var(--color-highlight) 0%, white 100%);
+	background: radial-gradient(circle, rgba(0, 0, 0, 0.5) -20%, rgba(0, 0, 0, 0.1) 40%, transparent 60%);
 	border: 0;
 	display: block;
 	margin: 0 auto 8px;
 	max-height: 64px;
 	width: auto;
 }
+
 .forbidden-lands.chat-item p {
 	margin: 0 0 4px;
 }
@@ -57,27 +64,33 @@
 				line-height: 18px;
 			}
 		}
+
 		h3 {
 			font-family: "IM Fell DW Pica SC";
 		}
+
 		h4 {
 			font-family: "IM Fell DW Pica";
 		}
 	}
+
 	&.item {
 		.header {
 			border: 10px solid transparent;
 			border-image: url(./assets/journal-art/small-border.webp) 100/10px repeat;
+
 			.header-stats {
 				.bonus {
 					grid-gap: 5px;
+
 					i {
 						vertical-align: unset;
 					}
 				}
 			}
 		}
 	}
+
 	.border {
 		border: none;
 	}
@@ -91,8 +104,9 @@
 .forbidden-lands.chat-item .border {
 	padding: 0 4px;
 }
+
 .message-content {
 	.entity-link {
 		border: none;
 	}
-}
+}
diff --git a/src/legacy-styles/components/_dialog.scss b/src/legacy-styles/components/_dialog.scss
@@ -63,7 +63,7 @@
 
 		.legend {
 			font-weight: bold;
-			font-family: var(--font-subheader);
+			font-family: var(--font-header-sc);
 		}
 
 		.modifiers {
@@ -102,13 +102,13 @@
 			&:hover,
 			&:focus {
 				box-shadow: none;
-				border: 2px groove var(--color-highlight);
-				background: var(--color-highlight);
+				border: 2px groove var(--color-theme-alt-600);
+				background: var(--color-theme-alt-600);
 			}
 
 			&:active {
 				box-shadow: none;
-				border: 2px ridge var(--color-highlight);
+				border: 2px ridge var(--color-theme-alt-900);
 			}
 		}
 	}
@@ -118,7 +118,7 @@
 	}
 
 	.display-numbers {
-		font-family: var(--font-subheader);
+		font-family: var(--font-header-sc);
 		font-size: var(--font-size-48);
 		line-height: var(--font-size-48);
 	}
@@ -160,6 +160,7 @@
 		width: 77%;
 		margin: 0 auto;
 	}
+
 	h2::after {
 		background: url(./assets/journal-art/endstop.webp) center no-repeat;
 		content: "";
@@ -169,6 +170,7 @@
 		background-size: 100%;
 		margin: 0 auto;
 	}
+
 	span[contenteditable="true"]:focus-visible {
 		outline-color: black;
 		outline-offset: 4px;
@@ -181,11 +183,12 @@
 	justify-content: center;
 	padding: 0;
 	margin-top: 5px;
+
 	a i {
 		font-size: 25px;
 	}
 
 	input {
 		margin: 0 5px !important;
 	}
-}
+}
diff --git a/src/legacy-styles/components/_roll-items.scss b/src/legacy-styles/components/_roll-items.scss
@@ -5,7 +5,7 @@
 }
 
 .chat-message .message-content .dice-roll {
-	font-family: var(--font-table);
+	font-family: var(--font-body);
 	background: var(--color-theme-gray-200);
 	color: var(--color-theme-gray-800);
 	border-radius: 4px;
@@ -22,7 +22,7 @@
 		background: none;
 		box-shadow: none;
 		border: none;
-		font-family: var(--font-subheader);
+		font-family: var(--font-header-sc);
 		font-size: var(--font-size-16);
 		font-weight: 600;
 	}
@@ -118,7 +118,7 @@
 .dice-infos {
 	.dice-info {
 		text-align: center;
-		font-family: var(--font-special);
+		font-family: var(--font-alternative);
 		font-size: var(--font-size-16);
 		font-weight: 600;
 		color: #444;
@@ -127,6 +127,7 @@
 			padding-bottom: 8px;
 		}
 	}
+
 	.result {
 		font-size: var(--font-size-18);
 	}
@@ -166,4 +167,4 @@
 .dice-buttons {
 	display: flex;
 	gap: 8px;
-}
+}
diff --git a/src/legacy-styles/components/_util-classes.scss b/src/legacy-styles/components/_util-classes.scss
@@ -36,8 +36,8 @@
 
 	&:hover,
 	&:focus {
-		box-shadow: 0 0 5px #a00404;
-		border: 2px solid #a00404;
+		box-shadow: 0 0 5px var(--color-theme-accent);
+		border: 2px solid var(--color-theme-accent);
 	}
 
 	&:active {
@@ -51,4 +51,4 @@
 	text-align: center;
 	font-style: italic;
 	font-weight: bold;
-}
+}