Merge pull request #13978 from RahlSilver/master

[Fallout PnP 4.0] Visuals and bug fixes from last patch. No new features are added.

Fallout PnP 4.0/Fallout PnP 4.css

@@ -1,17 +1,16 @@
 /*-----background-----*/
-
 .charsheet {
-    background-image: url("https://i.pinimg.com/originals/58/c0/0e/58c00e59a0d5c4d155635b4971adec05.jpg");
-    background-size: cover;
-    background-repeat: no-repeat;
+    background-image: url("https://i.imgur.com/pxJQ2ln.jpeg");
+    background-size: 400px 400px;
+    background-repeat: repeat;
 }
 
+/* Transparent panels override */
 .sheet-clear {
     background: none;
 }
 
-/*-----tabs-----*/
-
+/*----- Tab Visibility Controls -----*/
 input.sheet-tab1:not(:checked) ~ .sheet-tab1,
 input.sheet-tab2:not(:checked) ~ .sheet-tab2,
 input.sheet-tab3:not(:checked) ~ .sheet-tab3,
@@ -21,27 +20,29 @@ input.sheet-tab6:not(:checked) ~ .sheet-tab6 {
     display: none;
 }
 
+/*----- Tab Appearance -----*/
 input.sheet-tab {
     width: calc(16% - 4px);
     max-width: 160px;
     height: 24px;
-    outline: none !important;
     position: relative;
     cursor: pointer;
     z-index: 1;
     margin-right: 1px;
+    outline: none; /* Removed !important for accessibility friendliness */
 }
 
 input.sheet-tab1 {
     margin-left: 1px;
 }
 
+/* Tab Label Styling */
 input.sheet-tab::before {
     content: attr(title);
     display: inline-block;
     color: #89E799;
     background: #114C12;
-    border: solid 1px #89E799;
+    border: 1px solid #89E799;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     font-size: 14px;
@@ -57,14 +58,14 @@ input.sheet-tab:checked::before {
     background: #89E799;
 }
 
+/* Tab Bottom Divider */
 .sheet-tab-br {
     border-bottom: 1px solid #a8a8a8;
     margin-bottom: 5px;
     margin-top: 1px;
 }
 
-/*-----Sheet Arrow-----*/
-
+/*-----Sheet Arrow System (optional expandable sections)-----*/
 input.sheet-arrow {
     float: left;
 }
@@ -77,8 +78,6 @@ input.sheet-arrow:checked ~ div.sheet-body {
     display: block;
 }
 
-/* ----Hide actual sheet-arrow checkbox---- */
-
 input.sheet-arrow[type="checkbox"] {
     opacity: 0;
     width: 16px;
@@ -91,8 +90,6 @@ input.sheet-arrow[type="checkbox"] {
     z-index: 1;
 }
 
-/*-----Fake sheet-arrow checkbox-----*/
-
 input.sheet-arrow[type="checkbox"] + span::before {
     color: white;
     margin-right: 4px;
@@ -112,8 +109,7 @@ input.sheet-arrow[type="checkbox"]:checked + span::before {
     content: "▼";
 }
 
-/*-----sheet select-----*/
-
+/*-----sheet select styling-----*/
 .sheet-select {
     color: #114C12;
     font-weight: bold;
@@ -122,7 +118,7 @@ input.sheet-arrow[type="checkbox"]:checked + span::before {
     background: #89E799;
     border: 1px solid #89E799;
     border-radius: 5px;
-    box-shadow: 0 0 5px 3px #114C12;
+    box-shadow: 0 0 3px 1px #114C12;
     width: 120px;
     margin: 5px;
 }
@@ -242,7 +238,7 @@ input.sheet-bigcheck[type="checkbox"]:checked + span::before {
 /*-----Hidden Utility-----*/
 
 .sheet-hidden {
-    display: block;
+    display: none;
 }
 
 /*--------------Round checkbox--------------*/
@@ -262,7 +258,7 @@ input.sheet-roundcheck[type="checkbox"] {
 input.sheet-roundcheck[type="checkbox"] + span::before {
     content: "";
     margin-right: 4px;
-    border: solid 1px #a8a8a8;
+    border: solid 1px #89E799;
     line-height: 14px;
     text-align: center;
     display: inline-block;
@@ -271,8 +267,8 @@ input.sheet-roundcheck[type="checkbox"] + span::before {
     height: 14px;
     font-size: 12px;
     border-radius: 20px;
-    box-shadow: 0 0 20px #ccc;
-    background: radial-gradient(#f6f6f6, #dfdfdf);
+    box-shadow: 0 0 5px #114C12;
+    background: radial-gradient(#114C12, #89E799);
 }
 
 input.sheet-roundcheck[type="checkbox"]:checked + span::before {
@@ -286,7 +282,7 @@ input.sheet-roundcheck[type="checkbox"]:checked + span::before {
 .sheet-text_left {
     color: #89E799;
     font-weight: bold;
-    text-align: right;
+    text-align: left;
     background: #114C12;
     border: 1px solid #89E799;
     border-radius: 5px;
@@ -310,7 +306,7 @@ input.sheet-roundcheck[type="checkbox"]:checked + span::before {
 .sheet-text_right {
     color: #114C12;
     font-weight: bold;
-    text-align: left;
+    text-align: right;
     background: #89E799;
     border: 1px solid #89E799;
     border-radius: 5px;
@@ -346,9 +342,16 @@ input.sheet-roundcheck[type="checkbox"]:checked + span::before {
     text-decoration: none;
 }
 
-/*----Remove number spinner in Webkit browsers----*/
+/*----- Remove number input spinners in all browsers -----*/
+
+/* Chrome, Safari, Edge */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }
+
+/* Firefox */
+input[type="number"] {
+    -moz-appearance: textfield;
+}