css/gui/sidebar.css

+.sidebar-grid {
+	display: grid;
+	grid-template-columns: max-content max-content max-content;
+	grid-column-gap: 0.2em;
+	justify-content: center;
+}

css/gui/slaveList/cardStyle.css

+.card {
+	border: 2px solid #333333;
+	background-color: #1a1a1a;
+	padding: 1em;
+	margin-bottom: 1em;
+}

css/gui/slaveList/quickList.css

+button.quick-button {
+	width: auto;
+	margin-left: 10px;
+}
+
+.quick-list {
+	text-align: center;
+}
+
+.quick-list button {
+	margin: 10px;
+}
+
+.quick-list.devotion .mindbroken {
+	background-color: red;
+}
+
+.quick-list.devotion .very-hateful {
+	background-color: darkviolet;
+}
+
+.quick-list.devotion .hateful {
+	background-color: darkviolet;
+}
+
+.quick-list.devotion .resistant {
+	background-color: mediumorchid;
+}
+
+.quick-list.devotion .ambivalent {
+	background-color: yellow;
+	color: #111;
+}
+
+.quick-list.devotion .accepting {
+	background-color: hotpink;
+}
+
+.quick-list.devotion .devoted {
+	background-color: deeppink;
+}
+
+.quick-list.devotion .worshipful {
+	background-color: magenta;
+}
+
+.quick-list.trust .mindbroken {
+	background-color: red;
+}
+
+.quick-list.trust .extremely-terrified {
+	background-color: darkgoldenrod;
+}
+
+.quick-list.trust .terrified {
+	background-color: goldenrod;
+	color: #111;
+}
+
+.quick-list.trust .frightened {
+	background-color: gold;
+	color: #111;
+}
+
+.quick-list.trust .fearful {
+	background-color: yellow;
+	color: #111;
+}
+
+.quick-list.trust .hate-careful {
+	background-color: orange;
+}
+
+.quick-list.trust .careful {
+	background-color: mediumaquamarine;
+	color: #111;
+}
+
+.quick-list.trust .bold {
+	background-color: orangered;
+}
+
+.quick-list.trust .trusting {
+	background-color: mediumseagreen;
+}
+
+.quick-list.trust .defiant {
+	background-color: darkred;
+}
+
+.quick-list.trust .profoundly-trusting {
+	background-color: seagreen;
+}

src/003-assets/CSS/slaveList.css → css/gui/slaveList/slaveList.css

@@ -15,16 +15,9 @@ span.freeAssignment {
 	font-weight: bold;
 }
 
-/* Slave Summary Item */
-.ssi {
-	margin-right: 0.25em;
-}
-
 /* Slave Summary Block */
 .ssb {
+	display: inline-block;
 	margin-right: 2em;
-}
-
-.strong {
-	font-weight: bold;
+	text-indent: 0;
 }

css/gui/tabs.css

+div.tab-bar {
+	overflow: hidden;
+	margin-top: 5px;
+}
+
+div.tab-bar button {
+	color: var(--link-color);
+	float: left;
+	outline: none;
+	cursor: pointer;
+	padding: 1ex 1ex;
+	transition: 0.2s;
+	font-size: large;
+}
+
+div.tab-bar button:not(:first-child) {
+	border-left: none;
+}
+
+div.tab-bar button.card {
+	border-top-left-radius: 15px;
+	border-top-right-radius: 15px;
+	border: none;
+	margin-bottom: 0;
+}
+
+div.tab-bar button.card.active {
+	background-color: #1a1a1a;
+}
+
+div.tab-bar button:hover {
+	background-color: var(--button-hover-color);
+}
+
+div.tab-bar button.active {
+	background-color: var(--button-selected-color);
+	color: #c7cedf;
+}
+
+div.tab-bar button.show-warning { /* dumb name, but warning and error already exist */
+	background-color: #b30000;
+	border-color: #b30000;
+}
+
+div.tab-bar button.show-warning:hover {
+	background-color: #e60000
+}
+
+div.tab-bar button.show-warning.active {
+	background-color: #4d0000;
+}
+
+div.tab-bar a.active {
+	color: white;
+	pointer-events: none;
+	cursor: default;
+}
+
+.tab-content {
+	display: none;
+}
+
+.tab-content.active {
+	display: block;
+}
+
+.tab-content:not(.no-fade) {
+	padding: 6px 12px;
+	-webkit-animation: fadeEffect 0.3s;
+	animation: fadeEffect 0.3s;
+}
+
+.tab-content.card {
+	border-radius: 0 8px 8px 8px;
+	background-color: #1a1a1a;
+	border: 0;
+}
+
+.tab-content.card .slaveSummary.card {
+	background-color: #252525;
+}
+
+@-webkit-keyframes fadeEffect {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes fadeEffect {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}

css/gui/tooltips/tippy.css

+.has-tooltip {
+	text-decoration: underline dotted;
+	white-space: nowrap;
+}
+
+/* Fix links */
+a.has-tooltip {
+	text-decoration: none;
+}
+a.has-tooltip:hover {
+	text-decoration: underline;
+}
+
+.tippy-content {
+	text-indent: initial;
+	font-weight: initial;
+}
+
+.tippy-content ul {
+	margin: 5px;
+}
+.tippy-content ul:not(.choices-strip) {
+	padding-left: 10px;
+}
+
+.tippy-content .tip-details {
+	font-size: smaller;
+	/* if there isn't enough space vertically, add a scrollbar */
+	overflow-y: auto;
+	max-height: 95vh;
+}

css/icons/unicode_icons.css

+/* Scale Font up, since some Unicode Icons are a bit small (depending on font) */
+.unicode-icons {
+	font-size: 1.5em;
+}

css/interaction/export.css

+.export-field {
+	width: 100vw;
+	max-width: 100%;
+	word-break: break-all;
+	white-space: normal;
+	height: 80vh;
+}

css/interaction/familyTree.css

+#edit-family {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+}

css/interaction/prosthetics.css

+div.limb-selector {
+	display: grid;
+	grid-template-columns: 200px 100px 100px 100px 100px 100px;
+}
+
+div.limb-selector div.full {
+	grid-column-start: 1;
+	grid-column-end: 7;
+	text-align: center;
+}
+
+div.eyeContainer {
+	display: grid;
+	grid-template-columns: 80px 50px 70px 50px;
+}
+
+div.buy-prosthetics {
+	display: grid;
+	grid-template-columns: repeat(4, max-content);
+	grid-column-gap: 40px;
+}
+div.buy-prosthetics div.full {
+	grid-column-start: 2;
+	grid-column-end: 5;
+}
+div.buy-prosthetics div.research {
+	grid-column-start: 3;
+	grid-column-end: 5;
+	text-align: center;
+}

css/interaction/slaveInteract.css

+.adjacent-slave {
+	font-weight: bold;
+}
+
+.interact-name {
+	margin: 0 2em;
+}
+
+.si-header {
+	font-size: 1.5em;
+}
+
+.si-slave-title {
+	color: coral;
+	font-weight: bold;
+}
+
+.si-relationship {
+	color: lightgreen;
+	font-weight: bold;
+}
+
+.si-family {
+	color: lightgreen;
+}
+
+.si-rival {
+	color: salmon;
+}
+
+/* notification */
+a.with-note::after /*notification for links with notes in tooltips */
+{
+	font-family: "sc-icons";
+	content: " \f06a";
+	color: yellow;
+}

css/interaction/wardrobe.css

+.filter-row .button-group {
+	margin: 1em;
+}

css/intro/customizeSlaveTrade.css

+.customize-slave-trade-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
+    gap: 2px;
+}
+
+.customize-slave-trade-grid.presets {
+    grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
+}
+
+.customize-slave-trade-grid div {
+    text-align: center;
+}
+
+.customize-slave-trade-grid .controls-container {
+    float: right;
+    width: 6em;
+    text-align: left;
+}
+
+.controls-container button {
+    line-height: 15px;
+    min-width: calc(2em - 4px);
+    margin: 2px;
+}
+
+
+button.plus-button {
+    background: rgba(0, 139, 0, 0.2);
+    border-color: rgba(0, 139, 0, 0.3);
+}
+
+button.minus-button {
+    background: rgba(184, 0, 0, 0.2);
+    border-color: rgba(184, 0, 0, 0.3);
+}
+
+button.zero-button {
+    background: rgba(0, 0, 255, 0.2);
+    border-color: rgba(0, 0, 255, 0.3);
+}
+
+button.set-button {
+    background: rgba(255, 210, 0, 0.2);
+    border-color: rgba(255, 210, 0, 0.3);
+}
+
+button.plus-button:hover {
+    background: rgba(0, 139, 0, 0.4);
+    border-color: rgba(0, 139, 0, 0.3);
+}
+
+button.minus-button:hover {
+    background: rgba(184, 0, 0, 0.4);
+    border-color: rgba(184, 0, 0, 0.3);
+}
+
+button.zero-button:hover {
+    background: rgba(0, 0, 255, 0.4);
+    border-color: rgba(0, 0, 255, 0.3);
+}
+
+button.set-button:hover {
+    background: rgba(255, 210, 0, 0.4);
+    border-color: rgba(255, 210, 0, 0.3);
+}

css/manage/budget.css

+/* Table-Grid */
+.budget {
+	border: 2px white solid;
+	width: fit-content;
+	display: grid;
+	grid-template-columns: auto auto auto auto;
+}
+
+@media only screen and (min-width: 768px) {
+	.budget {
+		grid-template-columns: max-content max-content max-content auto;
+	}
+}
+
+.budget div {
+	padding: 0 20px;
+}
+
+.budget div.last-row {
+	padding-bottom: 10px;
+}
+
+.budget div.section {
+	border-top: 1px solid white;
+	margin-top: 5px;
+	padding-top: 5px;
+	font-size: 18px;
+	font-weight: bold;
+}
+
+.budget div.section:nth-child(4n+1) {
+	padding-left: 10px;
+}
+
+.budget div.group {
+	font-weight: bold;
+}
+
+.budget div.group:nth-child(4n+1) {
+	padding-left: 30px
+}
+
+.budget .entry {
+	background: var(--background-light);
+}
+
+.budget .entry:nth-child(4n+1) {
+	border-left: 1px solid white;
+	margin-left: 30px;
+	padding-left: 10px;
+}
+
+.budget div.final-result {
+	border-bottom: 3px double white;
+}
+
+
+.budget div.number {
+	text-align: right;
+	font-family: monospace;
+	font-weight: normal;
+}
+
+.budget > :nth-child(4n) {
+	border-left: 1px dashed white;
+}
+
+/* Floating Header */
+.budget div.header {
+	font-size: 20px;
+	font-weight: bold;
+	text-align: center;
+	position: sticky;
+	z-index: 1;
+	top: -1px;
+	background: var(--background-default);
+	border-bottom: 1px solid white;
+	padding-top: 5px;
+	padding-bottom: 5px;
+}
+
+/* Accordion */
+.budget .accordion:not(.closed) .cash,
+.budget .accordion:not(.closed) .reputation {
+	color: gray;
+}
+
+.budget .accordion-content {
+	margin: 0
+}
+
+.budget .accordion:nth-child(4n+1) {
+	position: relative;
+}
+
+.budget .accordion:nth-child(4n+1)::before {
+	font-family: "sc-icons";
+	content: "\f078";
+	position: absolute;
+	left: 0;
+	min-width: 30px;
+	text-align: center;
+	border-bottom: 1px solid white;
+	font-weight: normal;
+}
+
+.budget .accordion.closed:nth-child(4n+1)::before {
+	content: "\f054";
+	border-bottom: none;
+}

css/manage/main.css

+.main-fcnn {
+	text-align: center;
+	margin: 0 auto;
+}

css/neighbor/neighborDisplay.css

+.neighbor-container {
+	background-color: rgba(17,17,17,1);
+	padding: 5px;
+	max-width: fit-content;
+	margin: 0 auto;
+}
+
+.neighbor-container-grid {
+	display: grid;
+	grid-template-columns: auto auto auto;
+}
+
+.neighbor-container-list {
+	display: flex;
+	flex-flow: row wrap;
+	align-items: flex-start;
+}
+
+.neighbor-item {
+	margin: 3px;
+	border: 5px solid;
+	padding: 10px;
+	text-align: center;
+}
+
+.neighbor-item-selected {
+	background-color: rgba(255, 255, 255, 0.2);
+}
+
+.neighbor-item-empty {
+	border-color: rgba(17,17,17,1);
+}
+
+.neighbor-item-self {
+	border-color: white;
+}
+
+.neighbor-item-owned {
+	border-color: steelblue;
+}
+
+.neighbor-item-unowned {
+	border-color: red;
+}
+
+.neighbor-item-rival {
+	border-color: crimson;
+}

css/npc/slaveOnSlaveFeeding.css

+table.slave-on-slave-feeding {
+	width: 90%;
+}
+
+table.slave-on-slave-feeding tr {
+	vertical-align: top;
+}

css/rulesAssistant/conditionEditor.css

+@media only screen and (min-width: 1000px) {
+    .rule-builder {
+        display: grid;
+        grid-template-columns: 60% 40%;
+        grid-column-gap: 1em;
+    }
+}
+
+.rule-builder button {
+    color: var(--link-color);
+    border-radius: 4px;
+    margin-left: 4px;
+}
+
+.rule-builder button:hover {
+    color: var(--link-hover-color);
+}
+
+.rule-builder textarea {
+    margin-left: 0.2em;
+    min-width: 20em;
+}
+
+.rule-part-browser {
+}
+
+.rule-part {
+    display: inline-block;
+    border-radius: 8px;
+    border: 2px solid #333333;
+    background-color: #1a1a1a;
+    padding: 4px;
+    margin: 4px;
+}
+
+.validation-error::before {
+    font-family: "sc-icons";
+    content: "\f071";
+    color: red;
+    margin-right: 4px;
+}
+
+.rule-draggable {
+    cursor: grab;
+}
+
+.rule-draggable:hover{
+    background: #2c2c2c;
+}
+
+.rule-drag-element {
+    display: inline-block;
+    background-image: repeating-linear-gradient(0, #1a1a1a, transparent 0.2em, transparent 0.2em, #1a1a1a 0.4em),
+    repeating-linear-gradient(90deg, #1a1a1a, #777 0.2em, #777 0.2em, #1a1a1a 0.4em);
+    width: 1.6em;
+    height: 2em;
+    vertical-align: middle;
+}
+
+.rule-drag-element:hover{
+    background-image: repeating-linear-gradient(0, #2c2c2c, transparent 0.2em, transparent 0.2em, #2c2c2c 0.4em),
+    repeating-linear-gradient(90deg, #2c2c2c, #888 0.2em, #888 0.2em, #2c2c2c 0.4em);
+}
+
+.rule-drop-location {
+    border: #999 dashed 1px;
+    border-radius: 4px;
+    display: inline-block;
+    background-color: #555;
+    width: 5em;
+    height: 1.5em;
+    vertical-align: middle;
+    margin: 0 4px;
+}
+
+.part-dragging .condition-viewer .rule-drop-location {
+    animation: 1.5s ease-in-out infinite rule-drop-location-blink;
+}
+
+@keyframes rule-drop-location-blink {
+    0% {
+        background: #555;
+    }
+    50% {
+        background: #638022;
+    }
+    100% {
+        background: #555;
+    }
+}
+
+.rule-builder input[type="text"] {
+    margin-left: 0.2em;
+}
+
+.rule-right-margin {
+    margin-right: 0.2em;
+}
+
+.rule-left-margin {
+    margin-left: 0.2em;
+}
+
+.rule-custom-controls {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.rule-custom-mode {
+    text-align: center;
+}
+
+.rule-trash {
+    border: #F55 1px;
+    border-radius: 4px;
+    background-color: palevioletred;
+    width: 12em;
+    height: 2em;
+    text-align: center;
+    margin: 4px;
+    color: black;
+}
+.rule-trash:first-child {
+    display: inline-block;
+    padding: 8px;
+    width: 1.9em;
+    height: 1.9em;
+}
+
+.rule-trash::before {
+    font-family: "sc-icons";
+    content: "\f2ed";
+}
+
+.condition-custom {
+    width: 90%;
+}
+
+/* Encyclopedia help entry */
+
+.rule-help-table {
+    display: grid;
+    grid-template-columns: max-content auto auto;
+}
+
+.rule-help-table .head {
+    font-weight: bold;
+    position: sticky;
+    top: -1em;
+    background-color: #111;
+}
+
+.rule-help-table > div {
+    padding: 0 0.5em
+}
+
+.rule-help-table > :nth-child(6n+4),
+.rule-help-table > :nth-child(6n+5),
+.rule-help-table > :nth-child(6n+6) {
+    background-color: #222;
+}

css/rulesAssistant/raLists.css

+:where(.rajs-list-item) {
+	display: inline-block;
+	color: var(--link-color);
+	margin-right: 1em;
+}
+
+.rajs-list-item.selected {
+	color: gray;
+	text-decoration: none;
+}
+
+.rajs-list-item:last-of-type {
+	margin-right: 0;
+}
+
+.rajs-list-item:hover {
+	cursor: pointer;
+	text-decoration: underline;
+}
+
+.rajs-list-item.selected:hover {
+	cursor: default;
+	text-decoration: none;
+}
+
+.rajs-list strong:first-of-type, .rajs-list input {
+	margin-right: 2em;
+}
+
+.rajs-list-item input {
+	margin: 0.25em;
+}
+
+.rajs-rules {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	gap: 0.5em;
+	align-items: start;
+}
+.rajs-rules .rajs-list-item {
+	line-height: 1.5;
+	overflow-wrap: anywhere;
+}
+
+.rajs-options {
+	margin-top: 2em;
+}
+
+.rajs-section h1 {
+	border-bottom: 1px solid white;
+	cursor: pointer;
+}
+
+.rajs-section h1:hover {
+	text-decoration: underline;
+}

css/rulesAssistant/raOptions.css

+.ra-onoffswitch {
+	display: inline-block;
+	position: relative; width: 4em;
+	vertical-align: middle;
+	-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+}
+
+.ra-onoffswitch-checkbox {
+	display: none;
+}
+
+.ra-onoffswitch-label {
+	display: block; overflow: hidden; cursor: pointer;
+	border: 2px solid #999999; border-radius: 2px;
+}
+
+.ra-onoffswitch-inner {
+	display: block; width: 200%; margin-left: -100%;
+	transition: margin 0.3s ease-in 0s;
+}
+
+.ra-onoffswitch-inner:before, .ra-onoffswitch-inner:after {
+	display: block; float: left; width: 50%; height: 3.5ex; padding: 0; line-height: 3.5ex;
+	font-size: x-small; color: white; font-family: FreeSans, sans-serif; font-weight: bold;
+	box-sizing: border-box;
+}
+
+.ra-onoffswitch-inner:before {
+	content: "ON";
+	padding-left: 7px;
+	background-color: #111111; color: #FFFFFF;
+}
+
+.ra-onoffswitch-inner:after {
+	content: "OFF";
+	padding-right: 7px;
+	background-color: #111111; color: #D9D9D9;
+	text-align: right;
+}
+
+.ra-onoffswitch-switch {
+	display: block; width: 1.5em; margin: 1px;
+	background: #8A8A8A;
+	position: absolute; top: 0; bottom: 0;
+	right: 2.1em;
+	border: 2px solid #414141; border-radius: 2px;
+	transition: all 0.3s ease-in 0s;
+}
+
+.ra-onoffswitch-checkbox:checked + .ra-onoffswitch-label .ra-onoffswitch-inner {
+	margin-left: 0;
+}
+
+.ra-onoffswitch-checkbox:checked + .ra-onoffswitch-label .ra-onoffswitch-switch {
+	right: 0;
+	background-color: #2D80E0;
+}
+
+.ra-radio-label {
+	margin: 0.5em;
+}
+
+.ra-container {
+	display: grid;
+	grid-template-columns: minmax(100px, max-content) auto;
+	grid-row-gap: 0.5ex;
+}
+
+.ra-label {
+	grid-column: 1;
+}
+
+.ra-label::after {
+	content: ":";
+	margin-right: 0.5em;
+}
+
+.ra-sub-label {
+	font-style: italic;
+	margin-left: 2.5em;
+}
+
+.ra-sub-label::after {
+	content: ":";
+	margin-right: 0.5em;
+}
+
+.ra-inline-label {
+	margin-right: 0.5em;
+}
+
+.ra-inline-label::after {
+	content: ":";
+}
+
+.ra-setters {
+	margin-top: 3ex;
+}
+
+
+.ra-comment {
+	color: gray;
+	font-style: italic;
+	margin-left: 10px;
+}