Changed appearance of all visible checkboxes

LilLiteralist · Mar 9, 2024 · 24c3b8b · 24c3b8b
1 parent 0dcdd57
commit 24c3b8b
Show file tree

Hide file tree

Showing 2 changed files with 255 additions and 170 deletions.
diff --git a/Star Wars Saga Edition/StarWarsSagaEdition.css b/Star Wars Saga Edition/StarWarsSagaEdition.css
@@ -102,7 +102,7 @@ label.clickable,
 
 .charsheet input[disabled],
 .charsheet input[readonly],
-.defaultCrew:not(:checked) ~ .defaultCrewLock {
+.defaultCrew:not(:checked) ~ .defaultCrewLock:not([type="checkbox"]) {
     appearance:textfield!important; /* Otherwise, this will get overridden by the input[type="number"]:hover selector rule */
 	cursor: default;
 	border-color: var(--input-disabled-border);
@@ -112,6 +112,10 @@ label.clickable,
 	outline: none;
 }
 
+.charsheet .defaultCrew:not(:checked) ~ .defaultCrewLock[type="checkbox"] {
+    background-color: #aaa;
+}
+
 input[type="number"] {
     appearance:textfield;
 }
@@ -506,6 +510,47 @@ textarea.equipment-note-field {
 	accent-color: var(--checkbox-accent);
 }
 
+.ui-dialog .charsheet .visible-checkbox {
+	appearance: none;
+	background-color: #fff;
+	font: inherit;
+	color: currentColor;
+	width: 1.15em;
+	height: 1.15em;
+	border: 0.15em solid #8f8f9d;
+	border-radius: 33%;
+	display: inline-grid;
+	place-content: center;
+	transition: 60ms all linear;
+}
+
+.ui-dialog .charsheet .visible-checkbox::before {
+	content: "";
+    position:absolute;
+    margin:1px;
+	width: 0.85em;
+	height: 0.85em;
+	transform: scale(0) rotate(90deg);
+	transition: 60ms transform ease-in-out;
+	box-shadow: inset 1em 1em #222; /*The dimensions don't actually make a difference, as long as they are larger than the width and height. */
+	/*clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);*/
+	clip-path: polygon(0 0, 20% 0, 50% 25%, 80% 0, 100% 0, 100% 20%, 75% 50%, 100% 80%, 100% 100%, 80% 100%, 50% 75%, 20% 100%, 0 100%, 0 80%, 25% 50%, 0 20%);
+}
+
+.ui-dialog .charsheet .visible-checkbox:checked {
+	border-color: #54545c;
+	background-color: #eee;
+	transition: 80ms all linear;
+}
+
+.ui-dialog .charsheet .visible-checkbox:checked::before {
+	transform: scale(1) rotate(0deg);
+}
+
+.ui-dialog .charsheet .visible-checkbox:hover {
+	filter: brightness(115%);
+}
+
 .charsheet input.ct-label {
 	display:none;
 }
@@ -968,6 +1013,23 @@ input:not(:checked) + label.clickable {
 	accent-color: var(--dm-checkbox-accent);
 }
 
+.sheet-darkmode .ui-dialog .charsheet .visible-checkbox {
+	background-color: #202055;
+	border: 0.15em solid #4b4b8f;
+}
+
+.sheet-darkmode .ui-dialog .charsheet .visible-checkbox::before {
+	box-shadow: inset 1em 1em #8cd0ff; /*The dimensions don't actually make a difference, as long as they are larger than the width and height. */
+	/*clip-path: polygon(15% 0, 0 15%, 35% 50%, 0 85%, 15% 100%, 50% 65%, 85% 100%, 100% 85%, 65% 50%, 100% 15%, 85% 0, 50% 35%);*/
+	clip-path: polygon(0 0, 20% 0, 50% 25%, 80% 0, 100% 0, 100% 20%, 75% 50%, 100% 80%, 100% 100%, 80% 100%, 50% 75%, 20% 100%, 0 100%, 0 80%, 25% 50%, 0 20%);
+}
+
+.sheet-darkmode .ui-dialog .charsheet .visible-checkbox:checked {
+	background-color: #227;
+	border-color: #7481ea;
+	transition: 80ms all linear;
+}
+
 .sheet-darkmode .charsheet input[disabled],
 .sheet-darkmode .charsheet input[readonly],
 .sheet-darkmode .defaultCrew:not(:checked) ~ .defaultCrewLock {
@@ -977,6 +1039,14 @@ input:not(:checked) + label.clickable {
 	border-top-color: var(--dm-input-disabled-border-top);
 }
 
+.sheet-darkmode .charsheet .defaultCrew:not(:checked) ~ .defaultCrewLock[type="checkbox"] {
+    background-color: #606080;
+}
+
+.sheet-darkmode .charsheet .defaultCrew:not(:checked) ~ .defaultCrewLock[type="checkbox"]::before {
+    box-shadow: inset 1em 1em #9fd4fa; /*The dimensions don't actually make a difference, as long as they are larger than the width and height. */
+}
+
 .sheet-darkmode .charsheet div.sheet-textHead2Col,
 .sheet-darkmode .charsheet div.sheet-textHead,
 .sheet-darkmode .charsheet label.sheet-textHead,